# vue+iview+nuxt+mysql+jwt+sequelize+SSR

**Repository Path**: simo2018/NUXT.SSR

## Basic Information

- **Project Name**: vue+iview+nuxt+mysql+jwt+sequelize+SSR
- **Description**: 基于vue + iview + nuxt + mysql + jwt + sequelize + redis + SSR 的服务端渲染框架
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-03-21
- **Last Updated**: 2021-03-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# UUPT.SSRServer.Web 服务端渲染框架

> UUPT.SSRServer.Project

## 构建步骤

```bash
# install dependencies
$ npm install

# 开发调试模式
$ npm run dev

# 生产环境操作步骤
$ npm run build
$ npm run start
# 使用 pm2 启动
# 线上发布顺序  先将打包后得文件.nuxt上传，然后上传 config 和 server。
$ npm run build
$ pm2 start app.json  # 添加服务监听
# 生成静态目录
$ npm run generate
```

```bash
# 目录结构
.nuxt  # 打包以后得静态资源路径
config  # node服务配置
server  # 服务端文件夹
dist  # generate 生成得静态目录
web  #  web文件
nuxt.config.js  # nuxt.js 配置文件
package.json  
.babelrc 
server.js  # PM2 启动文件
```
### /web/pages/home.vue  有 vue文件 API示例
### /nuxt.config.js 内含API使用示例。
### 详细文档请看下方链接。
* [Nuxt.js 文档地址](https://www.nuxtjs.cn/guide).
* [Nuxt.js 配置API文档地址](https://www.nuxtjs.cn/api).
* [sequelize 配置中文API文档地址](https://github.com/demopark/sequelize-docs-Zh-CN).
* [sequelize 配置英文API文档地址](https://sequelize.org/v5/).
* [菜鸟教程 redis使用方法](https://www.runoob.com/redis/redis-conf.html).

```bash
# 路由组件
<nuxt></nuxt>  # default.vue 该组件只适用于在布局中显示页面组件（即非布局内容）。
<nuxt-child></nuxt-child>  # 嵌套路由时使用
<nuxt-link to="/list/hehe"></nuxt-link>  # 路由跳转
```

```bash

const { Op } = require("sequelize");
useraccount.findAll({
  where: {
    [Op.and]: [{ a: 5 }, { b: 6 }],            // (a = 5) AND (b = 6)
    [Op.or]: [{ a: 5 }, { b: 6 }],             // (a = 5) OR (b = 6)
    someAttribute: {
      // 基本
      [Op.eq]: 3,                              // = 3
      [Op.ne]: 20,                             // != 20
      [Op.is]: null,                           // IS NULL
      [Op.not]: true,                          // IS NOT TRUE
      [Op.or]: [5, 6],                         // (someAttribute = 5) OR (someAttribute = 6)

      // 使用方言特定的列标识符 (以下示例中使用 PG):
      [Op.col]: 'user.organization_id',        // = "user"."organization_id"

      // 数字比较
      [Op.gt]: 6,                              // > 6
      [Op.gte]: 6,                             // >= 6
      [Op.lt]: 10,                             // < 10
      [Op.lte]: 10,                            // <= 10
      [Op.between]: [6, 10],                   // BETWEEN 6 AND 10
      [Op.notBetween]: [11, 15],               // NOT BETWEEN 11 AND 15

      // 其它操作符

      [Op.all]: sequelize.literal('SELECT 1'), // > ALL (SELECT 1)

      [Op.in]: [1, 2],                         // IN [1, 2]
      [Op.notIn]: [1, 2],                      // NOT IN [1, 2]

      [Op.like]: '%hat',                       // LIKE '%hat'
      [Op.notLike]: '%hat',                    // NOT LIKE '%hat'
      [Op.startsWith]: 'hat',                  // LIKE 'hat%'
      [Op.endsWith]: 'hat',                    // LIKE '%hat'
      [Op.substring]: 'hat',                   // LIKE '%hat%'
      [Op.iLike]: '%hat',                      // ILIKE '%hat' (不区分大小写) (仅 PG)
      [Op.notILike]: '%hat',                   // NOT ILIKE '%hat'  (仅 PG)
      [Op.regexp]: '^[h|a|t]',                 // REGEXP/~ '^[h|a|t]' (仅 MySQL/PG)
      [Op.notRegexp]: '^[h|a|t]',              // NOT REGEXP/!~ '^[h|a|t]' (仅 MySQL/PG)
      [Op.iRegexp]: '^[h|a|t]',                // ~* '^[h|a|t]' (仅 PG)
      [Op.notIRegexp]: '^[h|a|t]',             // !~* '^[h|a|t]' (仅 PG)

      [Op.any]: [2, 3],                        // ANY ARRAY[2, 3]::INTEGER (仅 PG)

      // 在 Postgres 中, Op.like/Op.iLike/Op.notLike 可以结合 Op.any 使用:
      [Op.like]: { [Op.any]: ['cat', 'hat'] }  // LIKE ANY ARRAY['cat', 'hat']

      // 还有更多的仅限 postgres 的范围运算符,请参见下文
    }
  }
});

```
### 文档目录

```bash
|-- UUPT.SSRServer.Web
    |-- .babelrc  # babel 配置
    |-- .editorconfig  # 
    |-- .gitignore # 忽略文件
    |-- jest.config.js  # 自动化测试jest文件
    |-- nuxt.config.js  # nuxt项目配置文件
    |-- package.json
    |-- app.js # pm2启动时,app.json调用得文件
    |-- app.json # pm2 启动文件
    |-- .nuxt  # 生产环境打包目录
    |-- config # 配置文件
    |   |-- basedir.json  # nuxt.config.js  文件夹配置
    |   |-- jwt.json  # jwt加密字符串文件
    |   |-- mysql-config.json  # mysql 配置文件
    |-- dist # generate 生成静态目录
    |-- server # 服务端渲染及路由配置文件夹
    |   |-- index.js  # 服务启动文件
    |   |-- api # 接口文件夹
    |   |   |-- index.js  # 接口暴露文件
    |   |   |-- login.js  #  登陆接口文件
    |   |   |-- useraccount.js # 用户接口
    |   |-- controller  # 控制器
    |   |   |-- login.js  # 登陆控制
    |   |   |-- useraccount.js  # 用户控制
    |   |-- middleware  #  服务端中间件
    |   |   |-- log4.js  #  日志中间件文件
    |   |-- model  # 数据模型
    |   |   |-- useraccount.js # 用户数据模型
    |   |-- util # 工具方法
    |       |-- redis.js # redis工具
    |       |-- sequelize.js # mysql  sequelize工具
    |       |-- verifytoken.js # jwt 验证文件
    |-- test # 测试用例
    |   |-- Logo.spec.js  # 测试文件
    |-- web # 前端文件
        |-- assets # 资源文件夹
        |   |-- README.md
        |   |-- js
        |       |-- axios.js  # axios封装
        |-- components # 组件文件夹
        |   |-- Logo.vue
        |   |-- README.md
        |-- layouts # 默认入口文件夹  类似于 webpack 中 index.html
        |   |-- default.vue  # 默认入口vue文件 跟 vue项目入口文件  APP.vue 类似
        |   |-- README.md
        |-- middleware # 中间件 
        |   |-- README.md
        |-- pages  # 页面
        |   |-- demo.vue # 会自动生成  /demo  路由 
        |   |-- index.vue # 访问根目录时默认文件
        |   |-- list.vue # 生成 /list 路由 
        |   |-- README.md
        |   |-- list # 如果同时存在该文件和目录则是嵌套路由
        |       |-- hehe.vue  # 自动生成 /list/hehe  路由
        |-- plugins # 插件管理
        |   |-- axios.js  # axiox插件
        |   |-- iview.js # iview.js 插件
        |   |-- README.md
        |-- static # 静态资源位置
        |   |-- favicon.ico
        |   |-- README.md
        |-- store # 状态管理
            |-- README.md
```