Watch Star Fork

hongjiapei / vue-novelJavaScriptMIT

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
vue写的一个小说应用(请用chrome手机模式预览) http://xs.hjply.com
hongjiapei 最后提交于 no message
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md 7.77 KB

前言

刚开始学vue的时候想在网上找个项目练练手,结果要么是太简单的就一个列表demo,要么就是太复杂的看不懂,就想着自己写一个,想了半天决定写个小说应用,因为小说应用难度中等,后端数据用爬虫也比较方便拿到。

技术栈

  • 前端:vue2 + vuex + vue-router + webpack + ES6/7 + Muse-UI
  • 后端:php7 + lumen5.6

项目运行

git clone https://gitee.com/hongjiapei/vue-novel.git  

cd vue-novel/FE

npm install

npm start

访问 http://localhost:8080 就可以看到效果了

项目线上运行

前端部署

在vue-novel/FE目录运行npm run build,得到一个dist目录,配置一下nginx,贴一下我的配置:

server {
    listen 80;
    server_name xs.hjply.com;
    index index.html;
    root  /vue-novel/FE/dist;
}

后端部署

刚才用npm start运行调的是我的接口,现在讲一下自己搭建:

cd vue-novel/BE

composer install

然后配置一下nginx,贴一下我的配置:

server {
    listen 80;
    server_name xsbe.hjply.com;
    root /vue-novel/BE/public;
    index index.php;
    location ~ \.php$ {
      fastcgi_split_path_info ^(.+\.php)(/.+)$;
      fastcgi_pass  unix:/tmp/php-cgi.sock;
      fastcgi_index index.php;
      include fastcgi_params;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    if (!-e $request_filename) {
        rewrite ^/(.*)$ /index.php/$1 last;
    }

}

前端接口地址在vue-novel/FE/src/ajax/config.js配置,后端允许跨域的域名在vue-novel/BE/app/Http/Middleware/CorsMiddleware里配置

后端数据来源说明

后端数据都是用QueryList从小说网站爬的

效果演示

查看demo(请用chrome手机模式预览)

功能说明

  • 小说书架
  • 继续上次阅读
  • 小说搜索
  • 切换书源
  • 清除缓存
  • 小说分类缓存
  • 夜间模式
  • 字体大小设置
  • 左右点击翻页
  • 超时自动重新加载

打包成app

vue写的应用可以打包成app,虽然没办法调用系统接口,但是对小说app来说也无所谓。

打包方法

  • 下载HBuilder
  • 打开HBuilder->文件->打开目录,选中刚才的dist文件夹,然后右键->转换成移动app,就会生成一个manifest.json文件,里面是一些配置项,可以自己配置,也可以用它默认的。
  • 配置完了之后,右键->发行->云打包-打原生安装包,等它打包完了会自动下载app。

问题

这样打包会有一个问题:安卓手机的返回键只要按一下,就会回到桌面,这是因为我们的应用是单页应用。所以需要监听一下返回键,具体方法请参考:使用vue开发webApp,安卓手机自带回退键的问题解决

app上架

现在各大应用商店审核比较严格,每一家的规定都不一样,但是上架app一般都要求你有著作权证书,并且对侵权、广告等都有要求,以应用宝为例:应用宝接入审核原则

app安全

应用宝上架的时候会要求你加固app,它有个免费的加固工具叫乐固,按照它给的说明一步一步做就行了。
加固的时候要重新签名,由于打包的时候用的是Dcloud公有证书,这里贴一下它的信息:

KeyStore下载地址:http://download.dcloud.net.cn/HBuilder.keystore  
证书别名:hbuilder  
证书密码:123456  
keystore密码:123456 

打包+加固后的app示例

app下载

应用截图

1 2 3 4 5 6 7 8

项目心得

关于前端

  • 底部菜单active状态问题:刷新页面后要保证active状态是对的
  • 分类页面数据不会经常更新,用localStorage做缓存
  • localStorage本身没有过期时间,所以存的时候自己存一个expire字段,取的时候判断是否过期
  • 移动端开始搜索后,要让搜索框失去焦点,这样手机键盘会收回去
  • 加载动画必须要,不然体验太差了
  • 请求的时候要判断是否正在进行别的请求,如果是就取消本次请求
  • 进入某些页面要 window.scroll(0,0) 滚动到顶部
  • vue页面数据交互可以用vuex,也可以在路由配置的时候加上参数,也可以跟以前一样用?a=1&b=1这种方式
  • 这个项目中,由于翻页的时候路由不会变,只是参数在变,所以从详情页返回列表页的时候,总是会返回第一页,要保存一下翻页的进度
  • 由于保存了翻页进度,换一个分类进入列表页,会显示已保存的翻页进度,所以进入分类页要删除翻页进度,同理,进入书籍详情页也要删掉章节的翻页进度
  • 书架功能也是用localStorage来存的,由于小说可能重名,所以键名用书的url
  • 书架有继续上次阅读的功能,所以每次离开章节内容页的时候,要判断是否在书架,如果在则把该章节存到localStorage
  • localStorage缓存大小计算:其实缓存大小就是所有键值加起来的字节数,单位Byte
  • axios请求失败的处理:要在配置文件里配置,可以重新发起请求,也可以直接报错
  • 本来想用vue-router的路由缓存的,但是发现不该缓存的都缓存了,就算了,没有深入研究
  • 夜间模式、字体大小这些都是存localStorage,触发条件就是点击屏幕中间,所以要做点击位置的判断
  • 移动端一般用滑动翻页,但是我觉得下滑的时候容易误操作为翻页,所以改为左右点击翻页
  • 由于浏览器访问http经常被植入js广告(估计是运营商搞的),所以打算用https,但是我用lnmp一键安装包搭的环境,它自己安的证书有点问题,访问时好时坏,就算了

关于后端

  • lumen注意路由要书写的顺序,避免上一条路由会拦截下面一条路由的情况,我之前就被这个坑过
  • QueryList爬取网页的时候都removeHead,然后强制设置UTF-8,因为很多小说网站都是GBK的
  • ajax跨域问题:laravel有个lavavel-cors包可以直接用,lumen没有,网上找或者自己写一个全局路由中间件
  • lumen的storage文件夹的权限问题:一定要可读可写
  • lumen自定义配置文件后,要在bootstrap/app.php里加上 $app->configure('配置文件名');
  • 后端本来也打算用https,但也是访问时好时坏,还是算了

关于打包成app

  • HBuilder打包的时候要注意资源的路径,不能用绝对路径,要用相对的
  • 如果打算上架应用商店,打包的时候记得把包名记下来

License

MIT

项目点评 ( 15 )

你可以在登录后,发表评论

11_float_left_people 11_float_left_close