前言
自学前端有一段时间了，陷入了一个怪坑，就像猴子掰玉米一样，学一样忘一样。所以决定写一个项目，这样既可以复习以前的知识，又可以增加实践的能力，学习更多新知识。
项目计划
1. 构思和设计
思维导图
先大体构思出博客的主要功能和页面，使用思维导图写出来，或者在白纸上画出主要的页面，功能，以及它们之间的联系。
2. 使用的技术和工具
总结自己的技术栈和工具，思考要完成项目需要的技术和工具，并找到解决方案：
| 功能 | 自己的技术栈或工具 | 解决方案 |
|---|---|---|
| 网站前台 | HTML5、CSS3、JavaScript、Vue.js | Vue-cli |
| 网站后台 | HTML5、CSS3、JavaScript、Vue.js | Vue-cli |
| 网站后端 | Node.js、Koa2 | Koa2 |
| 数据库 | MongoDB | MongoDB、Mongoose |
| 服务器程序 | windows、虚拟机 | 学习 CentOS7 |
| 域名和空间 | 阿里云、腾讯云 | 购买云主机、注册域名、网站备案 |
3. 设计接口和命名规范
把自己设计的接口，都单独写在一个 .md 文件中，方便查找。
比如，前台路由的设计：
| 页面名称 | 路由设置 | 作用 |
|---|---|---|
| 首页 | / | 展示首页 |
| 文章列表 | /blog | 展示文章列表 |
| 关于我 | /about | 关于我 |
| 收藏 | /favorite | 展示自己的收藏 |
| 归档 | /archiving | 文章归档 |
| 文章 | /article/:id | 展示具体文章 |
| 作品列表 | /sample | 展示作品列表 |
| 作品展示 | /sample/:title | 展示具体的作品 |
项目搭建
工具和环境
自己的开发环境和工具：
- win10 系统
- 虚拟机 Vmware，已安装 CentOS7 Minimal-1804
- Node 10.15（安装了nvm可进行node版本管理）
- MongoDB（自带的图形界面工具：MongoDB Compass）
- VSCode 编辑器
- PuTTY （用来连接Linux系统）
- git
- Typora （编写 markdown 文本的利器）
项目按照前后端分离的方式开发，我的大体思路是，先写后端，把关键的API，路由，服务，数据库的操作等写好，再写前台，最后写后台。
在项目根目录，shift + 右键 开启 powershell，分别输入以下命令：
git init // 创建git仓库
npm init -y
新建以下几个文件和目录：
- .gitignore：git忽略文件
- README.md：项目介绍文件
- server目录：存放后端代码
- config目录：存放项目的一些配置文件
此时项目目录如下：
根目录
后端项目搭建
1. 创建项目
搭建完总的项目目录，接下来该搭建后端项目了。
首先进入 server 目录输入以下命令创建项目:
npm init -y
2. 安装依赖
然后安装项目需要的包：
npm i -S koa koa-bodyparser koa-router koa-static koa-views mongoose
npm i -D nodemon
3. 项目入口文件
新建 index.js 文件：
const Koa = require('koa')
const path = require('path')
const views = require('koa-views')
const static = require('koa-static')
const api = require('./api')
const routes = require('./routes')
const app = new Koa()
// 加载模板引擎
app.use(views(path.join(__dirname, './views'), {
extension: 'html'
}))
// 加载静态资源
app.use(static(path.join(__dirname, './public')))
// 加载路由和api模块
routes(app)
api(app)
app.listen(3000, () => {
console.log(`服务运行于：http://localhost:3000`)
})
4. 路由
新建 routes 目录，里面新建 index.js 文件：
const router = require('koa-router')()
router.get('/', async (ctx) => {
await ctx.render('index')
})
module.exports = app => {
app.use(router.routes()).use(router.allowedMethods())
}
5. API
新建 api 目录，里面新建 index.js 文件：
const article = require('./article')
const users = require('./users')
module.exports = app => {
app.use(article.routes()).use(article.allowedMethods())
app.use(users.routes()).use(users.allowedMethods())
}
api 目录内同时新建 article.js 和 users.js 文件，分别处理关于文章和用户状态的 API，其他API到时候再添加相应文件就可以。
6. 数据库
新建 database 文件夹，用来存放处理数据的方法；
database 文件夹内新建 db.js 的文件：
const mongoose = require('mongoose')
const mongoPath = 'mongodb://blog:password@localhost:27017/blog' //密码请自行修改
const options = {
useNewUrlParser: true,
}
mongoose.connect(mongoPath, options, (err) => {
if (err) {
return console.log(err)
}
console.log('数据库链接成功！')
})
module.exports = mongoose
再新建一个 article.js 文件，这个文件用来创建数据模型，和数据模式：
const mongoose = require('./db')
// 创建数据模式
const userSchema = new mongoose.Schema({
title: {
type: String,
trim: true,
},
author: {
type: String,
default: 'admin',
},
articleClass: String,
tags: Array,
createAt: Date,
updateAt: Date,
publish: {
type: Boolean,
default: false,
},
content: {
type: String,
default: '',
trim: true,
},
abstract: {
type: String,
default: '',
trim: true,
},
articleId: Number,
pv: {
type: Number,
default: 0,
},
comment: {
type: Number,
default: 0,
}
})
// 创建数据模型，对应数据库中的集合（collection）
const Article = mongoose.model('Article', userSchema)
module.exports = Article
7. 其他配置
新建 public 目录，将来存放一些公用文件，比如 css 文件，图片等；
新建 controllers 目录，用来存放一些控制器方法；
新建 views 目录，里面新建 index.html 文件，里面随便写点什么，我们一会测试一下服务器是否正常运行。
打开 package.json 文件，加入如下命令：
"scripts": {
"dev": "nodemon --watch ./index.js",
"test": "echo \"Error: no test specified\" && exit 1"
}
控制台运行：
npm run dev
这时我们打开浏览器，输入 http://localhost:3000 就可以看到 index.html 内编写的内容了，恭喜你成功的踏出了第一步。
到这里后端配置就差不多了，接下来就是接口的编写，和数据获取了，下篇再讲。
网友评论