文章目录
【全栈之巅】Node.js+Vue.js全栈开发王者荣耀手机端官网和管理后台(一)
工具安装和环境搭建
node.js下载安装
之前已经安装过
npm比较慢，可以配置淘宝镜像，可自行搜索配置。
这里我是安装并且使用yarn
mongodb安装
初始化项目
基于ElementUI的后台管理基础界面搭建
views/Main.vue
<template>
<el-container style="height: 100vh">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"
><i class="el-icon-message"></i>导航一</template
>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"
><i class="el-icon-setting"></i>导航三</template
>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</template>
<style>
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
data() {
const item = {
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
};
return {
tableData: Array(20).fill(item),
};
},
};
</script>
App.vue
<template>
<div id="app">
<router-view />
</div>
</template>
<style>
html,
body {
margin: 0;
padding: 0;
}
</style>
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'main',
component: Main
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
创建分类（客户端）
views/Main.vue
<template>
<el-container style="height: 100vh">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu router :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"
><i class="el-icon-message"></i>内容管理</template
>
<el-menu-item-group>
<template slot="title">分类</template>
<el-menu-item index="/categories/create">新建分类</el-menu-item>
<el-menu-item index="/categories/list">分类列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<style>
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
data() {
const item = {
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
};
return {
tableData: Array(20).fill(item),
};
},
};
</script>
views/CategoryEdit.vue
<template>
<div class="about">
<h1>新建分类</h1>
<el-form label-width="120px" @submit.native.prevent="save">
<el-form-item label="名称">
<el-input v-model="model.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
model: {
},
};
},
methods: {
save() {
// this.$http.post()
},
},
};
</script>
router/index.js
src/http.js
import axios from 'axios'
const http = axios.create({
baseURL: 'http://localhost:3000/admin/api'
})
export default http
main.js
CategoryEdit.vue
创建分类（服务端）
server/routes/admin/index.js
module.exports = app => {
const express = require('express')
const router = express.Router()
const Category = require('../../models/Category')
router.post('/categories', async(req, res) => {
const model = await Category.create(req.body)
res.send(model)
})
app.use('/admin/api', router)
}
server/index.js
const express = require('express')
const app = express()
app.use(express.json())
app.use(require('cors')())
require('./plugins/db')(app)
require('./routes/admin')(app)
app.listen(3000, ()=> {
console.log('http://localhost:3000');
});
server/plugin/db.js
module.exports = app => {
const mongoose = require('mongoose')
mongoose.connect('mongodb://127.0.0.1:27017/node-vue-moba', {
useNewUrlParser: true})
}
server/models/Category.js
const mongoose = require('mongoose')
const schema = new mongoose.Schema({
name: String
})
module.exports = mongoose.model('Category', schema)
分类列表
admin/views/CategoryList.vue
<template>
<div>
<h1>分类列表</h1>
<el-table :data="items">
<el-table-column prop="_id" label="ID" width="230"></el-table-column>
<el-table-column prop="name" label="分类名称"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
};
},
methods: {
async fetch() {
const res = await this.$http.get("categories");
this.items = res.data;
},
},
created() {
this.fetch();
},
};
</script>
分类编辑
CategoryEdit.vue
<template>
<div class="about">
<h1>{
{ id ? "编辑" : "新建" }}分类</h1>
<el-form label-width="120px" @submit.native.prevent="save">
<el-form-item label="名称">
<el-input v-model="model.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
props: {
id: {
},
},
data() {
return {
model: {
},
};
},
methods: {
async save() {
let res;
if (this.id) {
res = await this.$http.put(`categories/${
this.id}`, this.model);
} else {
res = await this.$http.post("categories", this.model);
}
this.$router.push("/categories/list");
this.$message({
type: "success",
message: "保存成功",
});
},
async fetch() {
const res = await this.$http.get(`categories/${
this.id}`);
this.model = res.data;
},
},
created() {
this.id && this.fetch();
},
};
</script>
分类删除
CategoryList.vue
<template>
<div>
<h1>分类列表</h1>
<el-table :data="items">
<el-table-column prop="_id" label="ID" width="230"></el-table-column>
<el-table-column prop="name" label="分类名称"></el-table-column>
<el-table-column fixed="right" label="操作" width="180">
<template slot-scope="scope">
<el-button
@click="$router.push(`/categories/edit/${scope.row._id}`)"
type="primary"
size="small"
>
编辑
</el-button>
<el-button @click="remove(scope.row)" type="primary" size="small">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
};
},
methods: {
async fetch() {
const res = await this.$http.get("categories");
this.items = res.data;
},
async remove(row) {
this.$confirm(`是否确定要删除分类 ${
row.name}`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(async () => {
const res = await this.$http.delete(`categories/${
row._id}`);
this.$message({
type: "success",
message: "删除成功!",
});
this.fetch();
});
},
},
created() {
this.fetch();
},
};
</script>
