realworld+nuxtJS项目

REALWORLD项目

介绍

GitHub仓库：https://github.com/wang1xiang/realworld-nuxtJS
在线示例：http://106.75.190.29:3000
接口文档：https://github.com/gothinkster/realworld/tree/master/api
页面模板：https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INSTRUCTIONS.md

创建项目

// 在nuxt-js-demo创建realworld-nuxtJS分支
git checkout -b realworld-nuxtJS
# 生成 package.json 文件
npm init -y
# 安装 nuxt 依赖
npm install nuxt

在 package.json 中添加启动脚本：

"scripts": {
    "dev": "nuxt"
}

创建pages/index.vue

启动项目：

npm run dev

此时在浏览器访问http://localhost:3000/ 测试。

导入样式文件

在项目根目录创建app.html页面，导入nuxt.js默认的html

创建nuxt.config.js文件

module.exports = {
  router: {
    linkActiveClass: 'active', // 处理导航链接高亮
    // 自定义路由规则
    extendRoutes (routes, resolve) {
      // 清空基于pages目录默认生成的路由表规则
      routes.splice(0)

      routes.push(...[
        {
          path: '/',
          component: resolve(__dirname, 'pages/layout/'),
          children: [
            {
              path: '', // 为空代表默认子路由
              name: 'home',
              component: resolve(__dirname, 'pages/home/'),
            }, {
              path: '/login',
              name: 'login',
              component: resolve(__dirname, 'pages/login/'),
            }, {
              path: '/register',
              name: 'register',
              component: resolve(__dirname, 'pages/login/'),
            }, {
              path: '/profile/:username',
              name: 'profile',
              component: resolve(__dirname, 'pages/profile/'),
            }, {
              path: '/settings',
              name: 'settings',
              component: resolve(__dirname, 'pages/settings/'),
            }, {
              path: '/editor',
              name: 'editor',
              component: resolve(__dirname, 'pages/editor/'),
            }, {
              path: '/article/:slug',
              name: 'article',
              component: resolve(__dirname, 'pages/article/'),
            }
          ]
        }
      ])
    }
  }
}

导入以下对应页面从[页面模板](https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INS TRUCTIONS.md)导入

layout作为页面根路由，由头部header、子路由和底部footer组成

image-20210319132908067.png

引入axios 封装请求模块

安装axios

npm i axios

创建utils/request.js

import axios from 'axios'
const request = axios.create({
    baseURL: 'https://conduit.productionready.io/'
})
export default request

登陆注册模块

接口文档

添加api/user.js文件，封装登陆注册方法

import { request } from '@/plugins/request'
// 用户登录
export const login = data => {
  return request({
    method: 'POST',
    url: '/api/users/login',
    data
  })
}
// 用户注册
export const register = data => {
  return request({
    method: 'POST',
    url: '/api/users',
    data
  })
}

在login组件中根据路由调用登陆或注册接口

为了防止刷新页面数据丢失，我们需要把数据持久化把登陆状态存到Cookie中

// login/index.vue

// 登陆成功后，为了防止刷新页面数据丢失，我们需要把数据持久化 把登陆状态存到Cookie中 
// 浏览器刷新cookie数据不会消失
Cookie.set('user', data.user)

// store/index.js
// 要使用cookie中的数据初始化vuex中的数据 保持登陆状态
export const actions = {
  // nuxtServerInit 是一个nuxt提供的特殊的 action 方法
  // 这个 action 会在服务端渲染期间自动调用，且仅在服务端中运行
  // 作用：初始化容器数据，以及需要传递数据给客户端使用的数据
  // commit提交mutations的方法 req服务端渲染期间的请求对象
  nuxtServerInit ({ commit }, { req }) {
    // console.log('nuxtServerInit')
    let user = null

    // 服务端代码
    // 如果请求头中有 Cookie
    if (req.headers.cookie) {
      // 使用 cookieparser 把 cookie 字符串转为 JavaScript 对象
      // 接口中会自动将本地存储的cookie数据发送到服务端
      const parsed = cookieparser.parse(req.headers.cookie)
      // try...catch...防止cookie的数据格式不对
      try {
        user = JSON.parse(parsed.user)
      } catch (err) {
        // No valid cookie found
      }
    }

    // 提交 mutation 修改 state 状态
    commit('setUser', user)
  }
}

使用中间件处理页面访问权限

创建middleware文件夹，添加authenticated.js和notAuthenticated.js文件，用于控制页面权限

在login/index.vue添加notAuthenticated中间件，用于控制已登录时跳转到首页，其他路由页面添加authenticated中间件用于验证是否登录

布局组件layout

在layout中根据vuex中的user，判断是否登陆状态，从而header中设置不同的选项

首页模块home

封装article.js请求
获取文章列表getArticles，应该在服务端渲染，所以放入asyncData中
根据获取到的数据格式渲染页面
处理分页参数 limit和offset
点击分页时改变路由query参数，默认情况不会调用asyncData方法，通过watchQuery监听query改变
```
watchQuery: ['page']
```
获取文章标签列表并展示

优化并行异步任务，使用Promise.all()实现获取tags和articles

 // 并发执行
const [ articleRes, tagRes ] = await Promise.all([
    loadArticles({
        limit,
        offset: (page - 1) * limit, // 数据偏移量 页数 * 大小
        tag
    }),
    getTags()
])
const { data: { articles, articlesCount } } = articleRes
const { data: { tags } } = tagRes

处理标签列表链接和数据，标签中通过改变query去重新加载数据
```
watchQuery: ['page', 'tag'],
```
处理标签高亮及链接，通过监听tab的变化，改变标签的高亮及是否展示tag
```
 watchQuery: ['page', 'tag', 'tab']
```

请求Your Feed标签数据，getYourFeedArticles，需要设置请求头

export const getYourFeedArticles = params => {
  return request({
    method: 'GET',
    url: '/api/articles/feed',
    params,
    headers: {
      // 添加用户身份，数据格式：Token空格Token数据
      Authorization: `Token eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6NDgxMTYsInVzZXJuYW1lIjoibHB6OTk5IiwiZXhwIjoxNTk3NzQxNTA4fQ.2yO8Fss4hYnvsIN2UYHsutQ1hmYqSSAA-UrIRnP4DOY`
    }
  })
}

使用axios拦截器同一设置用户Token

如果在utils/request.js中直接设置请求拦截器，不能像Vue那样直接通过import store from '@/store'拿到store对象，因为nuxt中的state是一个函数；所以需要将请求request.js添加到plugins中
1. 创建plugins文件夹，将request.js移入plugins中
2. 在nuxt.config.js中引入,~代表根目录
```
// 注册插件
plugins: [
    '~/plugins/request.js',
]
```
3. plugins中默认导出一个上下文对象context，包含一下内容

image-20210321101529020.png

属性	类型	可用	描述
app	vue根实例	客户端 & 服务端	包含所有插件的根实例。例如:想使用axios，可以通过context.app.$axios获取
isClient	Boolean	客户端 & 服务端	是否来自客户端渲染，废弃，请使用process.client
isServer	Boolean	客户端 & 服务端	是否来自服务端渲染，废弃，请使用process.server
isStatic	Boolean	客户端 & 服务端	是否通过nuxt generate
isDev	Boolean	客户端 & 服务端	是否开发模式，在生产坏境的数据缓存中用到
isHMR	Boolean	客户端 & 服务端	是否通过模块热替换，仅在客户端以dev模式
route	路由	客户端 & 服务端	路由实例
store	vuex数据	客户端 & 服务端	Vuex.sttore实例
env	l Object	客户端 & 服务端	nuxt.config.js中的环境变量
params	Object	客户端 & 服务端	route.params的别名
query	Object	客户端 & 服务端	route.query的别名
req	http.Request	服务端	Node.js API的Request对象。如果nuxt以中间件形式使用的话，这个对象就根据你所使用的框架（个人理解为页面）而定。nuxt generate 不可用
res	http.Reponse	服务端	Node.js API的Reponse对象。如果nuxt以中间件形式使用的话，这个对象就根据你所使用的框架（个人理解为页面）而定。nuxt generate 不可用
redirect	Function	服务端	用于重定向另一个路由，状态码在服务端被使用，默认302 redirect([status,]path[,query])
error	Function	客户端 & 服务端	前往错误页面，error(parmas),params包含statusCode和message字段
nuxtState	Object	客户端	nuxt状态
beforeNuxtRender（fn）	Function	服务端	更新NUXT在客户端呈现的变量,具体了解请看官网

设置axios请求拦截器，获取store中的user对象，设置token

// 通过插件机制获取到上下文对象
// export default (context)
export default ({ store }) => {
  // console.log(context)
  // 可以在拦截器中做公共业务处理 如设置token
  request.interceptors.request.use(function (config) {
    /**
     * 需要拿到vuex中的user对象
     * import store from '@/store'
     * 因为store都是通过export按需导出
     * 需要按需加载import { state } from '@/store'
     * 此时拿到的state是一个函数 需要调用一下此函数
     * 这样拿到的数据永远是null
     * 不同于客户端渲染 所以需要放入到plugins中
     */
    const { user } = store.state
  
    if (user && user.token) {
      config.headers.Authorization = `Token ${user.token}`
    }
  
    // 返回 config 请求配置对象
    return config
  }, function (error) {
    // 如果请求失败(此时请求还没有发出去)就会进入这里
    // Do something with request error
    return Promise.reject(error)
  })
}

处理文章发布时间格式化

使用dayjs，比moment更轻量，封装全局过滤器（在plugins中创建）
文章点赞

asyncData中请求数据后，设置文章点赞的disabled状态
```
articles.forEach(article => article.favoriteDisabled = false)
```
文章点赞或取消点赞时，需要在请求时处理点赞按钮状态

文章详情

通过getArticle获取文章详情，需要在服务端渲染，请求放入asyncData中
使用markdown-it将markdown格式转为HTML，使用v-html渲染页面
展示文章作者相关信息，封装组件article-meta.vue，传入article文章详情进行渲染

设置页面meta优化SEO，nuxt使用vue-meta更新应用的头部标签Head和html属性，可以在nuxt.config.js中定义，也可以设置个性化特定页面的meta标签

// 设置页面title和description对SEO非常有用
head () {
    return {
        title: this.title,
        meta: [
            { hid: 'description', name: 'description', content: 'My custom description' }
        ]
    }
}

通过客户端渲染展示评论列表

发布文章

添加成功后调用createArticle创建文章，并跳转到文章详情页

用户中心

加载用户信息，修改并提交

修改成功后和登陆页一样做持久化处理，并跳转到个人中心

退出登陆直接将容器和Coolie中的user设置为null，跳转回首页

个人中心

通过服务端渲染获取文章列表和个人信息

处理Edit Profile Setting和Follow Eric Simons 按钮显示与否

通过监听tab的变化加载文章数据

点赞和取消点赞和首页相同

如果是当前用户点击Edit Profile Setting进入设置

发布部署-打包

Nuxt.js 提供了一系列常用的命令,用于开发或发布部署

命令	描述
nuxt	启动一个热加载的Web服务器（开发模式） localhost:3000。
nuxt build	利用webpack编译应用，压缩JS和CSS资源（发布用）。
nuxt start	以生产模式启动一个Web服务器 (需要先执行 nuxt build )。
nuxt generate	编译应用，并依据路由配置生成对应的HTML文件 (用于静态站点的部署)。

部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令，而应该先进行编译构建nuxt build，然后再启动 Nuxt 服务nuxt start

常见的命令有：

--config-file 或 -c : 指定 nuxt.config.js 的文件路径。
--spa 或 -s : 禁用服务器端渲染，使用SPA模式
--unix-socket 或 -n : 指定UNIX Socket的路径。

最简单的部署方式

配置Host + Port

在nuxt.config.js中添加

// 生产环境服务器
server: {
    host: '0.0.0.0', // 默认localhost 如果配置到生产环境时要设置为0.0.0.0，监听所有网卡地址，不然无法访问
    port: 3000
},

压缩发布包

image-20210321140231600.png

.nuxt目录和static目录以及nuxt配置文件；package.json和package-lock.json是因为需要在服务端安装第三方包

压缩这五个文件到一个压缩包

把发布包传到服务端

在vs Code终端中链接远程服务器
```
ssh [email protected]
```
将压缩包上传到服务器对应地址
```
scp ./xxx.zip [email protected]:/root/realworld-nuxtjs
```
解压
unzip 解压
安装依赖
1. 在服务器上安装 nvm 参考: https://github.com/nvm-sh/nvm
```
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
```
2. 重启ssh终端后, 查看 nvm 版本
```
nvm --version
```
3. 安装 Node.js lts 长期支持版
```
nvm install --lts
```
4. 安装依赖
```
cnpm i
```
启动服务

npm run dev启动服务

使用PM2启动Node服务

在服务器上是通过npm run start命令启动web服务，最终执行的是nodeJs下的相关脚本启动。此时如果退出命令行，服务就会被关闭，导致访问不到，此时就需要让服务在后台运行。

如果使用了 Koa/Express 等 Node.js Web 开发框架，并使用了 Nuxt 作为中间件，可以自定义 Web 服务器的启动入口：

命令	描述
NODE_ENV=development nodemon server/index.js	启动一个热加载的自定义 Web 服务器（开发模式）。
NODE_ENV=production node server/index.js	以生产模式启动一个自定义 Web 服务器 (需要先执行 nuxt build )。

自动化部署

传统部署

麻烦，手动构建并发布
现代化部署方式（CI/CD）
1. 本地将更新代码推送到远程仓库
2. 将用户更新通知给持续集成/持续部署服务
  - 拉取最新代码到服务当中
  - 编译构建
  - 打包生成release
  - 将release部署到服务器
  image-20210321162548934.png

CI/CD服务

Jenkins
Gitlab CI
GitHub Actions
Travis CI
Circle CI
...

使用GitHub Action实现自动部署

配置GItHub Access Token

生成：https://github.com/settings/tokens

github settings --> Developer settings --> Personal access tokens --> Generate new token
Note --> Select scopes 全选repo，对此仓库操作权限，生成
复制token（只显示一次）

image-20210321171700294.png

配置到项目的Secrets中：https://

指定仓库 settings --> Secrets --> New Secret创建
Name填写和脚本中的名称要一致，value填入刚生成的token

image-20210321171822794.png

配置GitHub Actions执行脚本

在项目根目录创建.github/workflows目录

在workflows目录中创建main.yml文件

name: Publish And Deploy Demo
on:
  push:
    tags:
      - 'v*'

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:

    # 下载源码
    - name: Checkout
      uses: actions/checkout@master

    # 打包构建
    - name: Build
      uses: actions/setup-node@master
    - run: npm install
    - run: npm run build
    - run: tar -zcvf release.tgz .nuxt static nuxt.config.js package.json package-lock.json pm2.config.json

    # 发布 Release
    - name: Create Release
      id: create_release
      uses: actions/create-release@master
      env:
        GITHUB_TOKEN: ${{ secrets.TOKEN }}
      with:
        tag_name: ${{ github.ref }}
        release_name: Release ${{ github.ref }}
        draft: false
        prerelease: false

    # 上传构建结果到 Release
    - name: Upload Release Asset
      id: upload-release-asset
      uses: actions/upload-release-asset@master
      env:
        GITHUB_TOKEN: ${{ secrets.TOKEN }}
      with:
        upload_url: ${{ steps.create_release.outputs.upload_url }}
        asset_path: ./release.tgz
        asset_name: release.tgz
        asset_content_type: application/x-tgz

    # 部署到服务器
    - name: Deploy
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        password: ${{ secrets.PASSWORD }}
        port: ${{ secrets.PORT }}
        script: |
          cd /root/realworld-nuxtjs
          wget https://github.com/lipengzhou/realworld-nuxtjs/releases/latest/download/release.tgz -O release.tgz
          tar zxvf release.tgz
          npm install --production
          pm2 reload pm2.config.json

修改配置

添加secrets参数到github对应仓库

image-20210321173115025.png

配置PM2配置文件

/**
 * pm2配置文件
 * 使用pm2启动服务 名称RealWorld
 * 脚本是npm 参数是start
 * 相当于执行npm start命令
 */
{
  "apps": [
    {
      "name": "RealWorld",
      "script": "npm",
      "args": "start"
    }
  ]
}

提交更新

git add .
git tag v0.1.0
git push origin v0.1.0

查看自动部署状态

Actions页签 --> 发布部署-测试 --> Public And Deploy Demo --> build-and-deploy
访问网站
提交更新...

项目地址

realworld+nuxtJS项目

REALWORLD项目

介绍

创建项目

Home Page

导入样式文件

创建nuxt.config.js文件

导入以下对应页面从[页面模板](https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INS TRUCTIONS.md)导入

引入axios 封装请求模块

登陆注册模块

布局组件layout

首页模块home

文章详情

发布文章

用户中心

个人中心

发布部署-打包

最简单的部署方式

使用PM2启动Node服务

自动化部署

CI/CD服务

使用GitHub Action实现自动部署

配置GItHub Access Token

配置GitHub Actions执行脚本

你可能感兴趣的:(realworld+nuxtJS项目)

realworld+nuxtJS项目

REALWORLD项目

介绍

创建项目

Home Page

导入样式文件

创建nuxt.config.js文件

导入以下对应页面 从[页面模板](https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INS TRUCTIONS.md)导入

引入axios 封装请求模块

登陆注册模块

布局组件layout

首页模块home

文章详情

发布文章

用户中心

个人中心

发布部署-打包

最简单的部署方式

使用PM2启动Node服务

自动化部署

CI/CD服务

使用GitHub Action实现自动部署

配置GItHub Access Token

配置GitHub Actions执行脚本

你可能感兴趣的:(realworld+nuxtJS项目)

导入以下对应页面从[页面模板](https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INS TRUCTIONS.md)导入