我的网站构建记录

时间 2019-11-30

标签我的网站构建记录栏目网站开发繁體版

原文原文链接

想过要作我的网站，因为感受过程特别繁琐及技术缘由一直拖着，6.18买了个服务器，因此just do it否则有点浪费。html

准备

作了个简易版的网站，写这篇文章主要是为了梳理一下本身的思路，主要涉及:mysql，node，axios请求，vue打包文件上传到服务器，nginx，pm2管理node服务 这几个部分，我也会分别来描述这几方面的构建过程。前端

mysql数据库

在此以前没有接触过数据库，印象中就是增删改查。再决定要写node后台我决定系统的学习下mysql的语法，这里推荐本身这几天看的b站的mysql视频相信你的sql语句也会写的杠杠的。vue

其实对于前端来讲用的最多的就是查，再准备写项目前创建一个数据库，根据页面的增长，增长数据库中的表。具体的语法能够自行查阅资料，或者看我推荐的视频。node

node

有了数据，咱们须要使用js来操做数据库里的数据。这里咱们会用到npm mysql包,经过mysql库来建立与mysql链接池，而后可使用上面学的sql语句来操做数据库如:mysql

connection.query('SELECT * FROM `books` WHERE `author` = "David"', function (error, results, fields) {});
复制代码

虽然会写一些sql语句了，可是我用的不是这款js库，我仍是比较喜欢sequelize写起来比较简洁优雅。
有了sequelize库,咱们须要建立Model(至关于数据库中表)经过它来操做一个表中数据的增删改查。咱们会写一些代码以下:webpack

// 链接数据库
const sequelize = new Sequelize('minprogram', 'root', 'password', {
  host: 'localhost',
  dialect: 'mysql'
})
// 指定一个表
const User = sequelize.define(
  'user',
  {
    id: {
      type: Sequelize.STRING(10),
      primaryKey: true,
      autoIncrement: true
    },
    avatar: Sequelize.STRING(100),
    createdAt: Sequelize.BIGINT,
    updatedAt: Sequelize.BIGINT
  },
  { timestamps: false }
)
复制代码

有了model模型后咱们能够开始操做数据库了，能够把操做数据的方法单独存放在对应的业务逻辑下如:ios

// user.js
const User = require('./model')
async function findAll() {
  return User.findAll()
}
async function createUserId(options) {
  return User.create(options)
}
async function getId(id) {
  return User.findAll({
    where: { id: id }
  })
}
module.exports = {
  findAll,
  createOpenid,
  getOpenid,
  updateTime
}
复制代码

------------------分割线-------------------nginx

有了操做数据库的能力，能够开始写一些后台逻辑和接口了。好比要作一个登录的验证，判断(是否有该用户,用户密码是否正确)的逻辑。
来梳理下逻辑的实现思路:git

当点击登录按钮时调用登录接口,服务端查询根据用户名查询数据库中是否存在该用户名(不存在多个相同的用户名，注册时就要将该状况规避，提醒用户已经注册)
查询数据库发现找不到数据，说明该用户名还未注册
查询数据库发现密码和用户输入的密码不符，提示密码输入成功
还能够设置登录过时之类的，目前还没作，到此就算登录成功了吧

// 项目使用koa框架
// 统必定义类型，便于后期修改维护
const jsonMine = 'application/json'

router.get('/vue/login', async ctx => {
    const { username, password } = ctx.request.query
    const allList = await findUserByName(username)
    if (allList.length === 0) {
      handle(ctx, '', 1, '该用户未注册')
    } else {
      if (allList[0].password !== password) {
        handle(ctx, '', 1, '密码错误')
      } else {
        handle(ctx, '', 0, '登录成功')
      }
    }
  })
// 统一处理返回数据
function handle(ctx, data, code = 0, message = 'success') {
  ctx.type = jsonMine
  ctx.body = {
    code,
    data,
    message
  }
}
复制代码

axios请求跨域问题

对axios进行了一些封装，而后去请求后台服务我设置对端口号是8082。github

import axios from 'axios'
export default ({ api, params }) => {
  const baseURL = 'http://' + window.location.hostname + ':8082'
  return axios({
    url: api,
    method: 'get',
    baseURL,
    // headers: { 'client-test': 'cors' },
    params,
    'Content-Type': 'application/x-www-form-urlencoded'
  }).then(res => {
    const { status } = res
    if (
      (status >= 200 && status < 300) ||
      status === 304 ||
      status === 302
    ) {
      return new Promise((resolve, reject) => {
        resolve(res.data)
      })
    } else {
      return Promise.reject(
        new Error(
          `${'*'.repeat(10)}  状态吗：${status}  ${'*'.repeat(
            10
          )}\n ${'*'.repeat(10)}  api：  ${'*'.repeat(10)}\n ${'*'.repeat(
            10
          )}  `
        )
      )
    }
  })
}
复制代码

出现跨域对问题。控制台打出错误提示须要咱们后台设置容许访问的域。也就是设置 Access-Control-Allow-Origin字段。
能够写一个中间件cors.js，这样统一处理全部路由：

核心代码就是 let origin = options.origin || ctx.get('Origin') || '*' ctx.set('Access-Control-Allow-Origin', origin)

// cors.js
module.exports = function crossOrigin(options = {}) {
  const defaultOptions = {
    allowMethods: ['GET', 'PUT', 'POST', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS']
  }

  options = Object.assign({}, defaultOptions, options) 
  return async function cors(ctx, next) {
    // 设置容许访问后台对域，能够自行设置，或者取请求头中的origin，再不行就是全部的域均可以访问
    let origin = options.origin || ctx.get('Origin') || '*'
    ctx.set('Access-Control-Allow-Origin', origin)

    if (ctx.method === 'OPTIONS') {
      if (options.allowMethods) {
        ctx.set('Access-Control-Allow-Methods', options.allowMethods.join(','))
      }
      // Access-Control-Allow-Headers
      if (options.allowHeaders) {
        ctx.set('Access-Control-Allow-Headers', options.allowHeaders.join(','))
      } else {
        ctx.set(
          'Access-Control-Allow-Headers',
          ctx.get('Access-Control-Request-Headers')
        )
      }

      ctx.status = 204 // No Content
    } else {
        ctx.set('Access-Control-Allow-Credentials', 'true')
      }
      await next()
    }
  }
}

复制代码

vue打包文件上传到服务器

完成了客户端访问服务端并拿到数据更新UI和状态。将完成的代码经过webpack打包。生成以下文件，接下来就是将dist文件夹发到服务器上指定的目录下。

发送步骤以下

tar -cvf dist.tar dist 将 dist 文件夹压缩在根目录下生成 dist.tar 文件
scp dist.tar root@118.31.127.59:/repo/dist 将 dist.tar 文件上传到服务对应到路径下
tar -xvf dist 解压 dist.tar 文件还原 dist 文件夹

nginx 代理

经过nginx代理指向服务器本地的index.html，当访问域名时至关于打开的是服务器指定目录下的index.html文件。
在服务器安装nginx的状况下 vi /etc/nginx/nginx.conf 打开配置文件查看下。可自行查看，发现一大堆也看不懂的东西，就看到一句include /etc/nginx/conf.d/*.conf;

意思是会引入conf.d文件下的因此.conf结尾的配置文件。因此为了看着舒服，在 /etc/nginx/conf.d目录下新建一个html.conf文件来单独写本身的nginx配置。

server {
   listen 8980 ;
   server_name 118.31.127.59;
   root /repo ;
   location /dist {
      index index.html;
   }
 }
复制代码

这个配置经过root 指定根目录，经过location 指定uri 。当页面访问118.31.127.59:8980/repo/dist 是会打开该目录下当index.html文件。

疑问为何本地打开dist文件夹下的html文件运行报错，服务器端经过nginx代理就能够正确打开？关键仍是路径问题，若是想在本地的dist文件夹下正确打开，须要路径从 file://开始，而服务器中经过nginx指定根目录为 /repo 这样能够拿到正确的文件路径。

service

使用pm2管理node服务端的代码
1. pm2 ecosystem 在(local 本地)项目的根目录下执行，生成配置文件，指定服务地址和github地址
2. 初始化服务器,这样服务器上就 copy 本地的项目文件 pm2 deploy ecosystem.config.js production setup
3. 部署 pm2 deploy ecosystem.config.js production
4. 在服务器中 pm2 start app.js 启动node服务

第一次构建我的网站

如今面临的问题是打开页面加载时间太长。还有不少值得学习优化的地方，欢迎👏大佬在留言区给我提建议和交流。