node 搭建 博客及 blog 园使用手册

node 搭建 博客及 blog 园使用手册

注：该源文件来源于 B 站博主，非原创，但有修改

如果看完本文章之后您还有问题没解决可以在我博客网站给我留言
网站地址： xl-blog

在文章开始之前，若需要使用该模板源码及运行，请先具备一定的 nodejs 、vue 及相关的前端基础。

源文件中存在很多的 bug， 这些 bug 会导致其运行失败或在部分功能不能使用，经过了 一天的修改大致可以使用全部的功能且没有提示报错。请按照下面的步骤依次进行。

源码地址： https://www.xianglansweb.com/2021/07/13/node-da-jian-bo-ke-ji-blog-yuan-shi-yong-shou-ce/

视频演示地址（服务器资源有限就没有部署，但是录了一个视频大家可以看到效果）：https://xl-images.oss-cn-chengdu.aliyuncs.com/blog_manyPeople/meeting_01.mp4

1. 项目运行截图

2. 环境搭建

该源码使用必须拥有以下环境：

1. node 较高版本（低一点也没关系）
2. webpack
3. vue 的相关的环境（一般前两个就行了）
4. ngnix

3. 运行代码

• 下载上述源代码, 并解压源代码

  解压文件文件后你会看到两个文件夹：
  

• 将后端代码文件的sql 文件导入自己的本地mysql

• 分别进入两个文件夹删除其中的 node_modules 文件夹

注： 这里一定要删除，否则会报错

• 在本地终端（命令行）分别进入两个文件夹 执行 npm install 或者 cnpm install(安装了镜像)
• 使用终端进入后端文件夹的根目录 cd /many-people-blog\backCode 然后执行 npm run serve 命令

这里如果你报错了一般就是环境没安装好，或者前面没有删除 node_modules 或者没有执行 npm install 建议安装前面的重新来一次。

• 重新打开一个本地终端或者命令行，进入前端代码文件夹根目录，执行 npm start www 或者 进入 ./bin 目录文件夹执行 node www 命令。

• 最后打开页面 localhost: 8080 即可。

4. 代码报错修改

正常情况在执行前面相关命令时一般会报错，那肯定是代码源码错误，一般表现为命令行报错， 或者打开页面一直加载，无法登陆，无法注册等等一系列的错误。

接下来我们就一一修改源码，过程有点复杂，请耐心看完。

4.1 数据库无法连接

在导入 sql 文件后，在解压根目录下找到 config.json 配置文件，将里面的 代码修改成自己的用户名和密码

 "mysql": {
    "host": "localhost",
    "port": 3306,
    "user": "", // 您的数据库用户名
    "password": "" // 您的数据库密码
  },

如果是使用的云数据库则

 "mysql": {
    "host": "", // 这里是您的云数据库的地址
    "port": ,// 端口号
    "user": "", // 您的数据库用户名
    "password": "" // 您的数据库密码
  },

4.2 登陆页面报错，及无法注册账户

打开页面到登陆页面我们会发现在注册账户的时候接受到了注册验证码到时提示一直验证码错误。

解决方法：

打开 Login.vue 文件, 找到 sendMail() 函数 将 localstorage.setItem() 中的 res.data.data 改成 res.data.code

找到 后端文件 router/user.js 文件打开找到下面代码：

/* 邮箱验证 */
router.post("/emailInfo", (req, res) => {
  const { email } = req.body;
  let code = parseInt(Math.random() * 999999);
  debug("/email here")
  send(email, code)
    .then((v) => {
      req.session.registerCode = code;
      // console.log(req.session.registerCode);
      return res.json({ err: 0 }); 
    })
    .catch((reason) => {
      // console.log(reason);
      return res.json({ err: -999, message: reason });
    });
});

将 return res.json({ err: 0 }); 修改成：

return res.json({ err: 0 ,code:code });

然后回到注册页面再次注册即可完成注册，这里的邮件发送使用的163邮箱，如果自己使用请更改 config.json ：

"email": {
    "sender": "", // 你的邮箱地址
    "secret": "",// 这里无论是163 还是 QQ 邮箱都有一个秘钥，需要开通 pop/stmp 采用
    "server": "smtp.163.com", // 如果是QQ邮箱的话使用 stmp.qq.com
    "port": 465 
  },

开通QQ邮箱发送验证邮件步骤：参考链接

4.3 修改后端文件上传代码

进入后端管理路由： http://localhost:8080/admin/article/upload/articleManage

注：这里需要先登录。

找到以下文件：

分别打开每个文件找到 template 下面的 upload 标签，其中有一个属性为 action

<Upload action="http://localhost:3000/upload/imageUpload"
    :on-success="handleSuccess">
        <Button icon="ios-cloud-upload-outline">选择图片</Button>
    </Upload>

将以上 action 中的 3000 端口修改成 5050 （这里的5050） 是对应你的node程序的端口，如果你的node端口不是5050则修改成对应自己的端口即可。

**将上述文件截图的所有文件中的 upload 的 action 属性修改成 5050 端口

找到后端文件 的 router 文件中的 upload.js
将所有的以下代码：

file.url = `http://localhost:3000/uploads/${file.filename}${
        Path.parse(file.originalname).ext
}`;

修改成5050端口：

file.url = `http://localhost:5050/uploads/${file.filename}${
        Path.parse(file.originalname).ext
}`;

然后进入管理页面即可完成文件上传功能了。

到此为止基本所有的bug都已经解决完了，如果需要拓展可自行修改。

4.4 部署到云服务器（如果没有服务器可以跳过此步骤）

进入到前端代码的根目录对代码进行 webpack 打包， 在终端命令行输入

npm run build

打包完成后将 dist 文件拷贝到 后端文件夹的 public 文件下，public是静态开放资源文件
重新运行 node www
打开页面 localhost:5050/public/dist/index.html 即可

在云端 llinux 上使用 pm2 部署即可。