这只是简单配置前后端,没有处理错误,也没有做好模块化
后面会完善,这是作为入门,了解前后端通信的整体流程
git clone https://github.com/PanJiaChen/vue-admin-template.git
cnpm i
npm run dev
没错,目录结构将会是这样子,
src
前端项目与server
后端项目在同一级当中
不要急,前期的准备还是挺多的,本文也以后端入门为主
在server文件夹中
运行命令行
npm init
git init
package.json的文件
(主要用于自定义启动服务器和依赖包管理)关于koa2我们在其他地方讲
cnpm i --save-dev koa koa-bodyparser koa-router
koa依赖
,实际上还需要安装很多相关依赖koa
koa-router
koa-bodyparser
...
安装好了依赖,就引入并调用试试吧
server文件夹中
新建index.js
const Koa = require('koa') // 引入koa类,注意要大写(是个类class)
const bodyParser = require('koa-bodyparser') // 引入post请求解析
const router = require('koa-router')() // 引入post请求解析
const app = new Koa() // 实例化Koa
//调用路由模块的get/post等方法(路径,异步回调方法)
router.get('/', async (ctx, next) => {
// todo
})
app.use(bodyParser()) // 调用kao实例的use方法(插入中间件-堆积木)
app.use(router.routes()) // 调用use堆积木,传入路由模块的routes方法
app.listen(9000)
console.log('app start at port 9000...')
koa-router
模块的引入产生了好奇require('koa-router')()
const Router = require('koa-router')
const router = new Router()
app.use(router.routes())
require('koa-router')()
这种方式跳过new
???koa
这个引入就只能使用new这个类才能调用koa-router
暴露的是什么.
再跟一个方法new
把这个函数当成构造函数实例化成一个对象,用.
跟一个方法不管小插曲,只要我们用好koa提供的路由,配置koa实例的端口,就能启动服务器了
node index
app start at port 9000...
http://localhost:9000
也不会出现无法访问此网站
了写过
vue
或者其他前端项目的我们都知道,ES6、ES7
的很多命令是非常方便且语义化的
但是node10x
到目前为止,支持了许多ES6
语法,却依旧没有支持import/export
我们又想像src文件夹
里前端一样用到ES6
的话,就可以引入和配置babel
啦。(前端webpack
也是用这个模块来支持es6
的)
与网上大部分教程不同,这是最新的babel7,相关内容参考这篇博客
cnpm i --save-dev @babel/node @babel/core @babel/preset-env
server文件夹
中新建.babelrc
文件{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
编译并启动服务器
babel-node index
或者
npx babel-node index
用过vue或者其他前端的人都知道,我们保存代码,项目会帮我们重新启动渲染,不需要手动去关闭再重启(改了配置文件除外如:config文件夹)
cnpm i --save-dev nodemon
nodemon
依赖模块,是命令行工具,我们可以使用nodemon index
代替node index
babel
运行编译啊,当然nodemon
可以让我们自定义,监听什么运行什么命令行nodemon -w index --exec babel-node index
-w ——监听(接文件路径或文件夹)
--exec ——监听到变化后执行(后接要执行的命令)
我们都知道
webpack
中的package.json
能让我们通过npm run dev
或者npm start
等命令行执行操作
package.json
中自定义配置"scripts": {
"start": "nodemon -w index --exec babel-node index"
}
npm start
简写我们的合并了nodemon和babel
的命令行了mongoDB不是简单安装依赖就可以的,它需要像
node
一样下载安装,并且还要配置
这里就不讲解安装MongoDB
了,讲了也可能会过时,网上有很多教程
mongoose是
MongoDB
的封装后便于对数据操作的框架
MongoDB的原生指令
,看这里MongoDB的原生指令
,来封装
便于使用的框架(构造函数)看这里cnpm i --save-dev mongoose
mongoose.connect('mongodb://localhost/testDB') // 连接或创建testDB数据库
testDB
时会创建(有内容的话)// 创建数据库的表头实例
var UserSchema = new mongoose.Schema({
username: String,
password: String,
email: String
})
// 创建数据库的空表格
var User = mongoose.model('User', UserSchema) // 传入表格名、表头
// 手造表格User的数据变量
var user = {
username: '123',
password: '123',
email: ''
}
var newUser = new User(user) // 写入表格数据,要new
newUser.save() // 更新表格
好了,我们现在终于把,
数据库
和服务器
都准备好了
服务器
编写路由
,查询输出数据库
吧
router.get('/', async(ctx, next) => {
const data = await User.findOne({ username: '123' }) // 调用表格的查找方法
const result = { // 创建响应返回的数据结构
code: 200,
response: data,
ts: 12345
}
ctx.response.body = result // 直接把响应写进页面
return result // return干嘛,return到network吗?
})
mongoose
把表格方法包装成了promise
,所以使用awaitUser实例
(表格)(不是new后的,2者原型不一样)npm start
mongoose
连接的命令要传多一个参数mongoose.connect('mongodb://localhost/testDB', { useNewUrlParser: true })
再次启动,命令行里就没有报错了
查看一下数据库
mongo
testDB
是否有内容到浏览器访问服务器相应的路由试试
到上面,服务器成功开启,访问也成功连接到数据库
我们可以在前端通过axios
来连接后端了
vue-element-admin
这个模版中,已经安装好axios
依赖了src文件夹
中选择一个页面,这里选择首次进入的登录页面进行操作src --> view --> login --> index.vue
文件created(){
test() {
const res = await axios.get('http://localhost:9000')
if (res) console.log(res)
else console.log('接口没有请求到或者没有数据')
}
}
vue
npm start
)npm run dev
配置代理即可(原理查一下,很多总结)
config --> index.js
文件proxyTable: {
'/api': {
target: 'http://localhost:9000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
src --> view --> login --> index.vue
文件created(){
test() {
const res = await axios.get('/api')
if (res) console.log(res)
else console.log('接口没有请求到或者没有数据')
}
}
npm run dev
server --> index.vue
文件import cors from 'koa2-cors' // 引入跨域
// 处理跨域的配置
app.use(cors({
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization', 'Date'],
maxAge: 100,
credentials: true,
allowMethods: ['GET', 'POST', 'OPTIONS'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept', 'X-Custom-Header', 'anonymous'],
}))
app.use(cors....)
这个一定要在app.use(..)
这些中间件的最前面此文章的练习代码分支
参考博客(掘金)
vue-element-admin文档
koa2文档
mongoDB文档
mongoose文档
如有建议和疑问可联系
QQ:1017386624
邮箱:[email protected]