项目首页

项目描述：招聘网站（易展翅）

预览地址：new.izhanchi.com/

项目安装

运行 create-nuxt-app 确保安装了npx（npx在NPM版本5.2.0默认安装了）

npx create-nuxt-app <项目名>
or
yarn create nuxt-app <项目名>
复制代码

我的选项配置：Element-UI、Axios、ESLint

项目目录

├── assets               未编译的静态资源如 css 和 图片
    ── images            图片资源
    ── style             css、scss 文件
├── components           组件，不会像页面组件那样有 asyncData 方法的特性
├── dataCommon           存放
├── layouts              布局目录 layouts 用于组织应用的布局组件
    —— default           项目主布局
    —— bingPhone         微信登录绑定手机号布局（主要是和主布局不一样）
├── middleware           用于存放应用的中间件
├── nuxt.config.js       用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置
├── package.json         用于描述应用的依赖关系和对外暴露的脚本接口
├── pages                用于组织应用的路由及视图
├── plugins              存放需要在根vue.js应用实例化之前需要运行的JS插件
├── static               用于存放应用的静态文件(不会被webpack编译处理)
├── store                应用的 Vuex 状态树
复制代码

项目接口封装 （Axios）

问题汇总：

• 网站的用户中心登录相关的接口与本站的接口地址是不相同的

  do: 想到的是因为用户中心接口不多，所以在请求拦截里做处理切换接口代理。在请求用户中心接口的时候传多个“hosttype”字段来鉴别是否是用户中心接口。

  栗子：

   // get 请求
   this.$axios.get('xxx',{
     params：{...}
     hosttype: 'uhost'
   })
   // post 请求
   this.$axios.post('xxx',data,{
     headers: {...},
     hosttype: 'uhost',
   })
复制代码

登录弹窗组件封装

• 思路:因为这个登录并不是跳页面登录而是弹窗。所以当时考虑把登录做成全局组件，通过全局函数方法去调用组件。

• 注册全局代码

• 判断是否登录弹出弹出

问题汇总

• 因为弹窗是由用户主动触发。所以没放到服务器端然后就会出现组件内不存在 $axios，$cookies，$store 等方法。

  do: 想到的是因为全局组件是通过plugins文件插件的形式引入的。所以如上图一样通过传参的形式‘$axios,$cookies,$store传到组件内（不知道还有没有最优解，有待深究）。

• 微信二维码登录样式修改

  do: 需要引入微信第三方插件生成二维码，然后通过css-base64形式才能自定义二维码样式。

• 后端想通过登录接口设置cookies不成功

  原因：因为用户中心的站点跟本站站点不一致。

  do: 在请求config里添加 withCredentials参数并设为true

  developer.mozilla.org/zh-CN/docs/…

withCredentials: true
复制代码

页面开发总结

1. 业务组件和页面created生命周期内不能用window对象，这归咎与nuxt的生命周期机制。

详：红色框的生命周期是运行在服务端的，黄色框的即运行在服务端又运行到客户端。而window对象是客户端才有的。

2. 避免在asyncData个别异步请求失败导致服务端报错，从而使得页面不能正常展示。

   do: 给异步请求加上如下：

try {
   //在此运行代码
}
catch (err) {
   //在此处理错误
}
复制代码

3. 项目中运用高德地图

• 安装依赖

    npm install vue-amap --save
复制代码

• 写插件js，放到plugins目录下

    import Vue from 'vue'
    import VueAMap from 'vue-amap'
    Vue.use(VueAMap);

    VueAMap.initAMapApiLoader({
      key: 'xxxxxxx',
      plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'Geocoder', 'AMap.CitySearch']
    });
复制代码

• nuxt.config.js中添加该js

    { src: '@/plugins/vue-map', ssr: false },
复制代码

详：注意在nuxt.config.js中引入插件的时候ssr要设成false–因为高德地图源码里存在widow对象操作dome。

注：在引用组件的时候用客户端标签包住，我猜是组件里的生命周期使用了window对象。

注：如果同个页面使用多张地图记得 vid 要不同，否则无法显示。

eg:

    <client-only>
        <div class="company-map">
          <el-amap vid="amap"
            :center="['116.46' ,'39.92']"
            class="amap-container"
            :zoom="16">
            <el-amap-marker
              :position="['116.46' ,'39.92']"
              :visible="true"
              :clickable="false" />
          </el-amap>
        </div>
     </client-only>
复制代码

4. 项目中使用vue-pdf预览文件

• 安装依赖

    npm install --save vue-pdf
复制代码

• 写插件js，放到plugins目录下

    import Vue from 'vue'
    import pdf from 'vue-pdf'
    Vue.component('pdf', pdf)
复制代码

• nuxt.config.js中添加该js

    { src: '@/plugins/vue-pdf.js', ssr: false }
复制代码

同时在nuxt.config.js该js否则引用了也会报错。

页面引用：

    <div v-for="i in numPages" :key="i">
      <pdf :src="https://juejin.cn/post/pdfSrc" :page="i" style="width: 100%"></pdf>
    </div>
复制代码

      let pdf = require('vue-pdf')
      this.pdfSrc = pdf.default.createLoadingTask(this.url);
      // 加载pdf总页数
      this.pdfSrc.then(pdf => {
        this.numPages = pdf.numPages;
      });
复制代码

项目效果：

项目部署

①服务器安装pm2软件（用于管理运行node项目）

    wget ‐qO‐ https://getpm2.com/install.sh | bash
复制代码

②安装完成后，执行命令，为我们的 pm2 添加开机自启动

    pm2 startup systemd
    pm2 save
复制代码

③执行如下命令，来使用 pm2 来启动我们的 express

    pm2 start /home/node_project/socket/bin/www ‐‐name "项目名称"
复制代码

查看pm2管理的列表

    pm2 list
复制代码

④运行npm run build打包nuxt项目
然后将.nuxt、static、nuxt.config.js、package.json四个文件放到服务器目录中。

⑤服务器上运行npm install安装依赖

    npm install
复制代码

⑥pm2托管项目

    pm2 start npm ‐‐ start2pm2 start
    npm ‐‐name "my‐nuxt"‐‐ run starT
复制代码

⑦访问服务器链接。
pm2常用命令

1. pm2 list # 查看当前正在运行的进程
2. pm2 start all # 启动所有应用
3. pm2 restart all # 重启所有应用
4. pm2 stop all # 停止所有的应用程序
5. pm2 delete all # 关闭并删除所有应用
6. pm2 logs # 控制台显示所有日志
7. pm2 start 0 # 启动 id为 0的指定应用程序
8. pm2 restart 0 # 重启 id为 0的指定应用程序
9. pm2 stop 0 # 停止 id为 0的指定应用程序
10. pm2 delete 0 # 删除 id为 0的指定应用程序
11. pm2 logs 0 # 控制台显示编号为0的日志
12. pm2 show 0 # 查看执行编号为0的进程
13. pm2 monit my-nuxt # 监控名称为my-nuxt的进程

— END —