从0开始构建Vue+Express项目(一)

2020-07-20 本文已影响0人前端辉羽

本项目不适合前端小白，需要掌握一定的Vue和node知识
1.本文是系列文章的第一篇，主要讲了项目框架的构建。
2.本系列文章会从最初始构建项目，一直更新到项目打包上线。

本文目录：

1.前端框架搭建
- 1.1.项目初始化
- 1.2.项目精简
- 1.3.项目配置
- 1.4.源码调试
- 1.5.项目结构
2.后端框架搭建
- 2.1.Node 简介
- 2.2.Express 简介
- 2.3.项目初始化
- 2.4.Express 三大基础概念
- 2.5.项目框架搭建
3.项目难点分析
- 3.1.分析epub电子书
- 3.2.Nginx服务器搭建
- 3.3.安装MySQL

1.前端框架搭建

1.1.项目初始化

git clone https://github.com/PanJiaChen/vue-element-admin
cd vue-element-admin
npm i
npm run dev

1.2.项目精简

删除 src/views 下的源码，保留：
- dashboard：首页
- error-page：异常页面
- login：登录
- redirect：重定向
对 src/router/index 进行相应修改
删除 src/router/modules 文件夹
删除 src/vendor 文件夹

如果是线上项目，建议将 components 的内容也进行清理，以免影响访问速度，或者直接使用 vue-admin-template 构建项目，课程选择 vue-element-admin 初始化项目，是因为 vue-element-admin 实现了登录模块，包括 token 校验、网络请求等，可以简化我们的开发工作

1.3.项目配置

通过 src/settings.js 进行全局配置：
title：站点标题，进入某个页面后，格式为：页面标题 - 站点标题
showSettings：是否显示右侧悬浮配置按钮
tagsView：是否显示页面标签功能条
fixedHeader：是否将头部布局固定
sidebarLogo：菜单栏中是否显示LOGO
errorLog：默认显示错误日志的环境

1.4.源码调试

如果需要进行源码调试，需要修改 vue.config.js：

config
  // https://webpack.js.org/configuration/devtool/#development
  .when(process.env.NODE_ENV === 'development',
    config => config.devtool('cheap-source-map')
  )

将 cheap-source-map 改为 source-map，如果希望提升构建速度可以改为 eval
通常建议开发时保持 eval 配置，以增加构建速度，当出现需要源码调试排查问题时改为 source-map

1.5.项目结构

api：接口请求
assets：静态资源
components：通用组件
directive：自定义指令
filters：自定义过滤器
icons：图标组件
layout：布局组件
router：路由配置
store：状态管理
styles：自定义样式
utils：通用工具方法
auth.js：token 存取
permission.js：权限检查
request.js：axios 请求封装
index.js：工具方法
views：页面
permission.js：登录认证和路由跳转
settings.js：全局配置
main.js：全局入口文件
App.vue：全局入口组件

2.后端框架搭建

2.1.Node 简介

Node 是一个基于 V8 引擎的 Javascript 运行环境，它使得 Javascript 可以运行在服务端，直接与操作系统进行交互，与文件控制、网络交互、进程控制等

Chrome 浏览器同样是集成了 V8 引擎的 Javascript 运行环境，与 Node 不同的是他们向 Javascript 注入的内容不同，Chrome 向 Javascript 注入了 window 对象，Node 注入的是 global，这使得两者应用场景完全不同，Chrome 的 Javascript 所有指令都需要通过 Chrome 浏览器作为中介实现，而node可以直接控制操作系统

2.2.Express 简介

express 是一个轻量级的 Node Web 服务端框架，同样是一个人气超高的项目，它可以帮助我们快速搭建基于 Node 的 Web 应用

2.3.项目初始化

创建项目

mkdir admin-imooc-node
cd admin-imooc-node
npm init -y

安装依赖
npm i -S express
创建 app.js

const express = require('express')
// 创建 express 应用
const app = express()
// 监听 / 路径的 get 请求
app.get('/', function(req, res) {
  res.send('hello node')
})
// 使 express 监听 5000 端口号发起的 http 请求
const server = app.listen(5000, function() {
  const { address, port } = server.address()
  console.log('Http Server is running on http://%s:%s', address, port)
})

2.4.Express 三大基础概念

2.4.1.中间件

中间件是一个函数，在请求和响应周期中被顺序调用

const myLogger = function(req, res, next) {
  console.log('myLogger')
  next()
}
app.use(myLogger)

定义一个中间件myLogger ，然后通过app.use进行加载使用，加载方式和vue.use很像，其实vue.use加载的也是一个函数
注意：中间件需要在响应结束前被调用，普通的中间件在响应结束之后就不会再调用了

2.4.2.路由

应用如何响应请求的一种规则
响应 / 路径的 get 请求：

app.get('/', function(req, res) {
  res.send('hello node')
})

响应 / 路径的 post 请求：

app.post('/', function(req, res) {
  res.send('hello node')
})

规则主要分两部分：

请求方法：get、post......
请求的路径：/、/user、/.*fly$/......（请求的路径是可以使用正则表达式的）

2.4.3.异常处理

通过自定义异常处理中间件处理请求中产生的异常

app.get('/', function(req, res) {
  throw new Error('something has error...')
})
const errorHandler = function (err, req, res, next) {
  console.log('errorHandler...')
  res.status(500)
  res.send('down...')
}
app.use(errorHandler)

使用时需要注意两点：

第一，参数一个不能少，否则会视为普通的中间件
第二，中间件需要在请求之后引用（异常处理的中间件和普通的中间件的加载位置是不同的）

2.5.项目框架搭建

路由

boom是一个兼容HTTP的错误对象，他提供了一些标准的HTTP错误，比如400(参数错误)等。
安装 boom 依赖：
npm i -S boom
创建 router 文件夹，创建 router/index.js：

const express = require('express')
const boom = require('boom')
const userRouter = require('./user')
const {
  CODE_ERROR
} = require('../utils/constant')
// 注册路由
const router = express.Router()
router.get('/', function(req, res) {
  res.send('欢迎学习小慕读书管理后台')
})
// 通过 userRouter 来处理 /user 路由，对路由处理进行解耦
router.use('/user', userRouter)
/**
 * 集中处理404请求的中间件
 * 注意：该中间件必须放在正常处理流程之后
 * 否则，会拦截正常请求
 */
router.use((req, res, next) => {
  next(boom.notFound('接口不存在'))
})
/**
 * 自定义路由异常处理中间件
 * 注意两点：
 * 第一，方法的参数不能减少
 * 第二，方法的必须放在路由最后
 */
router.use((err, req, res, next) => {
  const msg = (err && err.message) || '系统错误'
  const statusCode = (err.output && err.output.statusCode) || 500;
  const errorMsg = (err.output && err.output.payload && err.output.payload.error) || err.message
  res.status(statusCode).json({
    code: CODE_ERROR,
    msg,
    error: statusCode,
    errorMsg
  })
})
module.exports = router

/user/info才能访问到usejs下的info路由，将不同的路由分配到不同的router当中进行处理。
创建 router/use.js：

const express = require('express')
const router = express.Router()
router.get('/info', function(req, res, next) {
  res.json('user info...')
})
module.exports = router

创建 utils/constant：

module.exports = {
  CODE_ERROR: -1
}

验证 /user/info：
"user info..."
验证 /user/login：
{"code":-1,"msg":"接口不存在","error":404,"errorMsg":"Not Found"}

3.项目难点分析

3.1.分析epub电子书

epub电子书的本质就是一个zip压缩文件
首先去相应网站下载一个epub格式的资源，这里我是在https://www.aixdzs.com/下载的，然后把文件的后缀改为zip，然后右键解压
解压后META-INF文件夹是一定会存在的，存放着当前epub文件的规范，META-INF文件夹下一定有一个container.xml文件，根据container.xml文件里面的rootfile标签的fullpath属性找到其属性值指示的文件，如content.opf，content.opf文件就在解压文件的根目录下，content.opf中的spine标签标识着整个电子书的阅读顺序，toc,ncx文件中有目录的渲染规则，所有的资源全都映射到content.opf的mainfest标签中，同时电子书的基本信息是在metadata标签中。

3.2.Nginx服务器搭建

第一步：安装
windows 通过下载官网安装包，下载地址：http://nginx.org/en/download.html
第二步：修改配置文件
打开配置文件 nginx.conf：
修改一：添加当前登录用户为owner
修改二：在结尾大括号之前添加：

server
{ 
  charset utf-8;
  listen 8089;
  server_name http_host;
  root /Users/sam/upload/;
  autoindex on;
  add_header Cache-Control "no-cache, must-revalidate";
  location / { 
    add_header Access-Control-Allow-Origin *;
  }
}

如果需要加入 https 服务，可以再添加一个 server：

server
{
  listen 443 default ssl;
  server_name https_host;
  root /Users/sam/upload/;
  autoindex on;
  add_header Cache-Control "no-cache, must-revalidate";
  location / {
    add_header Access-Control-Allow-Origin *;
  }
  ssl_certificate /Users/sam/Desktop/https/book_youbaobao_xyz.pem;
  ssl_certificate_key /Users/sam/Desktop/https/book_youbaobao_xyz.key;
  ssl_session_timeout  5m;
  ssl_protocols  SSLv3 TLSv1;
  ssl_ciphers  ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
  ssl_prefer_server_ciphers  on;
}

经过上述配置之后，在nginx的安装目录下start nginx就可以正常启动nginx，然后通过http://localhost:8089就可以访问了。

资源文件就只要下载第一个和最后一个就行了epub.zip和zpub.zip，一个是电子书，一个是解压后的电子书https://pan.baidu.com/s/1x2N7vl8nd2x6x7FnlQH3Cg#list/path=%2F
，提取码：ksjv下载之后把 epub 和 epub2 目录放入nginx配置的root路径下

https的证书都是ca颁发的，所以每次访问的时候都会去ca验证证书的合法性

阿里云首页=〉ssl证书=〉购买证书=〉免费性DV SSL

3.3.安装MySQL

MySQL安装地址：https://dev.mysql.com/downloads/mysql/
另外需要安装地址Navicat，官方地址地址：https://www.navicat.com.cn/products

window启动MySQL
https://blog.csdn.net/ycxzuoxin/article/details/80908447

初始化数据库：
创建数据库的时候一定要选择字符集 utf-8
下载 book.sql，https://www.youbaobao.xyz/resource/admin/book.sql
右键数据库=>运行sql文件，运行完之后右键刷新一下数据库，刚才的sql就导入进去了