学习【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台笔记（1.1-USB迷|专注于互联网分享

学习【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台笔记（1.1

【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台

本项目是学习Bilibili 全栈之巅视频教程相关源码和体会

持续更新中…

1.1 王者荣耀全栈开发部分截图

1.2 配置环境，下载安装 node 和MongoDB server 、 vscode

1.3 项目介绍：admin是后台界面部分、web是前台界面部分、server是前后台的后端接口部分。部署到服务器上，localhost:3000地址是前台首页不是后台的首页，添加admin才是后台的首页

// 全局安装vuecli,-g 全局安装
npm i -g @vue/cli  
// 创建web页项目
vue create web

// 创建管理后端项目
vue create admin

  // 新建server文件夹，并在其下npm init -ynpm i -g nodemonnpm run serve //启动后台服务器

1.4 安装插件

// 全局安装nodemon
npm i -g nodemon

// admin端
vue add element
vue add router
npm install axios

// server端安装express@next版本  联接mongodb数据库 跨域 映射 上传文件中间件
npm i express@next mongoose cors inflection multer

1.5 server端自定义脚本中用nodemon运行代码

"serve": "nodemon index.js"

2.1 admin端创建分类及编辑页(admin/src/views/CategoryEdit.vue)

<template><div class="about">//id 存在现实编辑，否则现实新建<h1>{{id ? "编辑":"新建"}}分类</h1>// 提交表单执行save方法<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(){if(this.id){this.$http.put(`/categories/${this.id}`,this.model)}else{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() // 判断是否通过router的props传回了id}
}
</script>

2.1.1 admin 端请求接口放在http.js中(admin/src/http.js)

import axios from 'axios'const http = axios.create({baseURL:'http://localhost:3000/admin/api'
})export default http

2.1.2 在Main.js中引用http.js(admin/src/main.js)

import http from './http'
Vue.prototype.$http = http

2.2 server端新建数据库、建立数据库模型、设置增删改查路由

// 后端连接数据库(server/plugins/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:{type:String}
})
module.exports = mongoose.model('Category',schema)

// 写后端接口(server/route/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)})// 改router.put('/categories/:id',async(req,res)=>{const model = await Category.findByIdAndUpdate(req.params.id,req.body)res.send(model)})//删router.delete('/categories/:id',async(req,res)=>{const model = await Category.findByIdAndDelete(req.params.id,req.body)res.send({success: true})})// 查router.get('/categories',async(req,res)=>{const items = await Category.find().limit(10)res.send(items)})router.get('/categories/:id',async(req,res)=>{const model = await Category.findById(req.params.id)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('./route/admin')(app)
app.listen(3000,()=>{console.log('http://localhost:3000')
})

2.3 admin端定义vue-router路由

// admin端路由定义(admin/src/router/index.js)
const routes = [{path: '/',name: 'Main',component: () => import(/* webpackChunkName: "main" */ '../views/Main.vue'),children: [{path: '/categories/create',name: 'CategoriyEdit',component: () => import('../views/CategoriyEdit.vue')}]}
]

2.4 父类编辑 axios 传参、接收参数

    // 后端server查(server\routes\admin\index.js)router.get('/categories', async (req, res) => {// console.log(req.query)const limit = +req.query.limit || 10const model = await Category.find().limit(limit)res.send(model)})

    // 前端admin查询请求(admin\src\views\CategoriesList.vue)async fetch() {const params = {limit: 10,};// 查询字符串传参 用 req.query接收   eg. http://localhost:9999/axios?id=1000  服务端 app.get('/axios', (req, res)// restful风格URL  传参 用req.params.id 接收 eg.http://localhost:9999/axios/1000  服务端需要:idconst res = await this.$http.get('categories', { params });console.log(res);this.items = res.data;},

2.5 父类删除 axios 传参、接收参数

     // 前端admin删除具体物品请求(admin\src\views\CategoriesList.vue)
<template><div class="about"><h1>分类列表</h1><el-table :data="items"><el-table-column prop="_id" label="ID" width="230"> </el-table-column><el-table-column prop="parent.name" label="上级分类" width="120"></el-table-column><el-table-column prop="name" label="分类名称" width="120"></el-table-column><el-table-column fixed="right" label="操作" width="120"><template slot-scope="scope"><el-buttontype="text"size="small"@click="$router.push(`/categories/edit/${scope.row._id}`)">编辑</el-button><el-button @click="remove(scope.row)" type="text" size="small">删除</el-button></template></el-table-column></el-table></div>
</template>
<script>...async remove(row) {console.log(row);this.$confirm(`此操作将永久删除该分类${row.name}, 是否继续?`, '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(async () => {const res = await this.$http.delete(`/rest/categories/${row._id}`);console.log(res);this.$message({type: 'success',message: '删除成功!',});this.fetch();}).catch(() => {this.$message({type: 'info',message: '已取消删除',});});},
</script>

学习【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台笔记（1.1

【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台

本项目是学习Bilibili 全栈之巅视频教程相关源码和体会

持续更新中…

1.1 王者荣耀全栈开发部分截图

1.2 配置环境，下载安装 node 和MongoDB server 、 vscode

1.3 项目介绍：admin是后台界面部分、web是前台界面部分、server是前后台的后端接口部分。部署到服务器上，localhost:3000地址是前台首页不是后台的首页，添加admin才是后台的首页

// 全局安装vuecli,-g 全局安装
npm i -g @vue/cli  
// 创建web页项目
vue create web

// 创建管理后端项目
vue create admin

  // 新建server文件夹，并在其下npm init -ynpm i -g nodemonnpm run serve //启动后台服务器

1.4 安装插件

// 全局安装nodemon
npm i -g nodemon

// admin端
vue add element
vue add router
npm install axios

// server端安装express@next版本  联接mongodb数据库 跨域 映射 上传文件中间件
npm i express@next mongoose cors inflection multer

1.5 server端自定义脚本中用nodemon运行代码

"serve": "nodemon index.js"

2.1 admin端创建分类及编辑页(admin/src/views/CategoryEdit.vue)

<template><div class="about">//id 存在现实编辑，否则现实新建<h1>{{id ? "编辑":"新建"}}分类</h1>// 提交表单执行save方法<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(){if(this.id){this.$http.put(`/categories/${this.id}`,this.model)}else{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() // 判断是否通过router的props传回了id}
}
</script>

2.1.1 admin 端请求接口放在http.js中(admin/src/http.js)

import axios from 'axios'const http = axios.create({baseURL:'http://localhost:3000/admin/api'
})export default http

2.1.2 在Main.js中引用http.js(admin/src/main.js)

import http from './http'
Vue.prototype.$http = http

2.2 server端新建数据库、建立数据库模型、设置增删改查路由

// 后端连接数据库(server/plugins/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:{type:String}
})
module.exports = mongoose.model('Category',schema)

// 写后端接口(server/route/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)})// 改router.put('/categories/:id',async(req,res)=>{const model = await Category.findByIdAndUpdate(req.params.id,req.body)res.send(model)})//删router.delete('/categories/:id',async(req,res)=>{const model = await Category.findByIdAndDelete(req.params.id,req.body)res.send({success: true})})// 查router.get('/categories',async(req,res)=>{const items = await Category.find().limit(10)res.send(items)})router.get('/categories/:id',async(req,res)=>{const model = await Category.findById(req.params.id)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('./route/admin')(app)
app.listen(3000,()=>{console.log('http://localhost:3000')
})

2.3 admin端定义vue-router路由

// admin端路由定义(admin/src/router/index.js)
const routes = [{path: '/',name: 'Main',component: () => import(/* webpackChunkName: "main" */ '../views/Main.vue'),children: [{path: '/categories/create',name: 'CategoriyEdit',component: () => import('../views/CategoriyEdit.vue')}]}
]

2.4 父类编辑 axios 传参、接收参数

    // 后端server查(server\routes\admin\index.js)router.get('/categories', async (req, res) => {// console.log(req.query)const limit = +req.query.limit || 10const model = await Category.find().limit(limit)res.send(model)})

    // 前端admin查询请求(admin\src\views\CategoriesList.vue)async fetch() {const params = {limit: 10,};// 查询字符串传参 用 req.query接收   eg. http://localhost:9999/axios?id=1000  服务端 app.get('/axios', (req, res)// restful风格URL  传参 用req.params.id 接收 eg.http://localhost:9999/axios/1000  服务端需要:idconst res = await this.$http.get('categories', { params });console.log(res);this.items = res.data;},

2.5 父类删除 axios 传参、接收参数

     // 前端admin删除具体物品请求(admin\src\views\CategoriesList.vue)
<template><div class="about"><h1>分类列表</h1><el-table :data="items"><el-table-column prop="_id" label="ID" width="230"> </el-table-column><el-table-column prop="parent.name" label="上级分类" width="120"></el-table-column><el-table-column prop="name" label="分类名称" width="120"></el-table-column><el-table-column fixed="right" label="操作" width="120"><template slot-scope="scope"><el-buttontype="text"size="small"@click="$router.push(`/categories/edit/${scope.row._id}`)">编辑</el-button><el-button @click="remove(scope.row)" type="text" size="small">删除</el-button></template></el-table-column></el-table></div>
</template>
<script>...async remove(row) {console.log(row);this.$confirm(`此操作将永久删除该分类${row.name}, 是否继续?`, '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(async () => {const res = await this.$http.delete(`/rest/categories/${row._id}`);console.log(res);this.$message({type: 'success',message: '删除成功!',});this.fetch();}).catch(() => {this.$message({type: 'info',message: '已取消删除',});});},
</script>

USB迷 | 专注于互联网分享

学习【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台笔记（1.1

学习【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台笔记（1.1

1.1 王者荣耀全栈开发部分截图

1.2 配置环境，下载安装 node 和MongoDB server 、 vscode

1.3 项目介绍：admin是后台界面部分、web是前台界面部分、server是前后台的后端接口部分。部署到服务器上，localhost:3000地址是前台首页不是后台的首页，添加admin才是后台的首页

1.4 安装插件

1.5 server端自定义脚本中用nodemon运行代码

2.1 admin端创建分类及编辑页(admin/src/views/CategoryEdit.vue)

2.1.1 admin 端请求接口放在http.js中(admin/src/http.js)

2.1.2 在Main.js中引用http.js(admin/src/main.js)

2.2 server端新建数据库、建立数据库模型、设置增删改查路由

2.3 admin端定义vue-router路由

2.4 父类编辑 axios 传参、接收参数

2.5 父类删除 axios 传参、接收参数

学习【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台笔记（1.1

1.1 王者荣耀全栈开发部分截图

1.2 配置环境，下载安装 node 和MongoDB server 、 vscode

1.3 项目介绍：admin是后台界面部分、web是前台界面部分、server是前后台的后端接口部分。部署到服务器上，localhost:3000地址是前台首页不是后台的首页，添加admin才是后台的首页

1.4 安装插件

1.5 server端自定义脚本中用nodemon运行代码

2.1 admin端创建分类及编辑页(admin/src/views/CategoryEdit.vue)

2.1.1 admin 端请求接口放在http.js中(admin/src/http.js)

2.1.2 在Main.js中引用http.js(admin/src/main.js)

2.2 server端新建数据库、建立数据库模型、设置增删改查路由

2.3 admin端定义vue-router路由

2.4 父类编辑 axios 传参、接收参数

2.5 父类删除 axios 传参、接收参数

与本文相关的文章

评论列表 (0)