框架
// 安装node moudles
npm install
前期解释
文件解释
config项目开发环境配置，不用改
node_modules项目依赖资源包，建立以后不用管
project里面是css，js，fonts，img不用管
static静态资源不用管
要换图标的话再src同层级的favicon.ico文件，注意后缀，直接用新文件替换了
package.json是项目的依赖及使用到的工具配置，这个很重要
src下文件解释
App.vue
不用修改，重要的就是一个router-view
main.js
组件引入及路由拦截器
api
axiosFun.js请求方式及响应方式
*MG.js网络请求，引用上面的req
assets
图标等静态资源
components
界面布局的组件
error.vue404错误组件
leftnav.vue左边菜单组件
navcon.vue头部导航组件
Pagination.vue分页组件
template.vue界面显示组件/搞不懂那个js，看起来感觉没用又不敢删除
router
index.js全局路由管理，路由跳转都在这里，基本上是首页下面包含子界面这样
utils
utils.js工具类，localStorage，cookie，时间戳，不用修改
views
界面组件等，主要的显示文件
index.vue和login.vue主页及登录组件
每一个类创建一个文件夹，里面写界面的展示代码及业务逻辑
vuex
store.js全局状态管理，不过这里只有登录登出，数据在其他地方
代码解释（主要是界面书写）
菜单导航
src/components/leftnav.vue在data中添加，展示菜单，id随意不重复就行
{
menuid: 520,
icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
menuname: 'Story',
hasThird: null,
url: null,
menus: [
{
menuid: 521,
icon: 'icon-provider-manage',
menuname: 'Story管理',
hasThird: 'N',
url: 'story/Story',
menus: null
}
]
}
网络请求
在src/api中新建一个网络请求的js(self.js)
import axios from 'axios';
import { loginreq, req } from './axiosFun';
/**
* Story
*/
// 获取全部的Story
export const storyList = (params, openid, token) => {
const headers = {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json', // 设置请求头的Content-Type
'token': token
};
const paramsData = {
...params,
openid: openid
};
return axios.post("http://localhost:8080/story/story_query", null, { headers, params: paramsData });
};
// 删除Story
export const storyDelete = (id, openid, token) => {
const headers = {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json', // 设置请求头的Content-Type
'token': token
};
const paramsData = {
openid: openid,
id: id
};
return axios.post("http://localhost:8080/story/story_delete", null, { headers, params: paramsData });
}
// 添加Story
export const storyAdd = (openid, token, summary, content) => {
const headers = {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json', // 设置请求头的Content-Type
'token': token
};
const paramsData = {
openid: openid,
summary: summary,
content: content,
collection: false
};
return axios.post("http://localhost:8080/story/story_insert", null, { headers, params: paramsData});
}
// 编辑Story
export const storyModify = (id, openid, token, summary, content) => {
const headers = {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json', // 设置请求头的Content-Type
'token': token
};
const paramsData = {
openid: openid,
id: id,
summary: summary,
content: content,
collection: false
};
return axios.post("http://localhost:8080/story/story_update", null, { headers, params: paramsData});
}
页面组件
注意
1、v-model数据绑定换成自己的
2、表格哪里根据自己的字段添加
3、editForm中的数据改成自己需要的
4、编辑的弹出框里面改成自己需要的
5、methods中的数据库函数（即self.js中的函数）参数一定要传入正确，后端尽量使用POST方法
6、全局变量在vuex/store.js中
/**
* 基础菜单 Story管理
*/
<template>
<div>
<!-- 面包屑导航 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>Story管理</el-breadcrumb-item>
</el-breadcrumb>
<!-- 搜索筛选 -->
<el-form :inline="true" :model="formInline" class="user-search">
<el-form-item label="搜索：">
<el-input size="small" v-model="formInline.fuzzy" placeholder="输入搜索数据"></el-input>
</el-form-item>
<el-form-item label="">
<el-input size="small" v-model="formInline.timelimit" placeholder="输入时间范围"></el-input>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
<el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
</el-form-item>
</el-form>
<!--列表-->
<el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
element-loading-text="拼命加载中" style="width: 100%;">
<el-table-column align="center" type="selection" width="60">
</el-table-column>
<el-table-column sortable prop="id" label="ID" width="60">
</el-table-column>
<el-table-column sortable prop="time" label="创建时间" width="150">
</el-table-column>
<el-table-column sortable prop="summary" label="标题" width="100">
</el-table-column>
<el-table-column sortable prop="content" label="内容" width="520">
</el-table-column>
<el-table-column align="center" label="操作" min-width="300">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
<!-- 编辑界面 -->
<el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
<el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
<el-form-item label="Story标题" prop="deptName">
<el-input size="small" v-model="editForm.summary" auto-complete="off"
placeholder="请输入Story标题"></el-input>
</el-form-item>
<el-form-item label="Story内容" prop="deptNo">
<el-input size="small" v-model="editForm.content" auto-complete="off"
placeholder="请输入Story内容"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="closeDialog">取消</el-button>
<el-button size="small" type="primary" :loading="loading" class="title"
@click="submitForm('editForm')">保存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
// 导入网路请求方法
import { storyList, storyDelete, storyAdd, storyModify } from '../../api/self'
import Pagination from '../../components/Pagination'
export default {
data() {
return {
nshow: true, //switch开启
fshow: false, //switch关闭
loading: false, //是显示加载
editFormVisible: false, //控制编辑页面显示与隐藏
title: '添加',
editForm: {
id: '',
summary: '',
content: '',
token: localStorage.getItem('logintoken'),
// 这两个没写，因为只展示基础的写法
fuzzy: '',
timelimit: ''
},
// rules表单验证
rules: {
summary: [
{ required: true, message: '请输入Story标题', trigger: 'blur' }
],
content: [{ required: true, message: '请输入Story内容', trigger: 'blur' }]
},
formInline: {
page: 1,
limit: 10,
varLable: '',
varName: '',
token: localStorage.getItem('logintoken')
},
// 删除部门
seletedata: {
ids: '',
token: localStorage.getItem('logintoken')
},
userparm: [], //搜索权限
listData: [], //用户数据
// 分页参数
pageparm: {
currentPage: 1,
pageSize: 10,
total: 10
}
}
},
// 注册组件
components: {
Pagination
},
/**
* 数据发生改变
*/
/**
* 创建完毕
*/
created() {
this.getdata(this.formInline)
},
/**
* 里面的方法只有被调用才会执行
*/
methods: {
// 获取Story列表
getdata(parameter) {
this.loading = true
/***
* 调用接口
*/
storyList(parameter, this.$store.state.openid, this.$store.state.token)
.then(res => {
console.log(res);
this.loading = false
if (res.success == false) {
this.$message({
type: 'info',
message: res.message
})
} else {
this.listData = res.data.data
// 分页赋值
this.pageparm.currentPage = this.formInline.page
this.pageparm.pageSize = this.formInline.limit
this.pageparm.total = res.count
}
})
.catch(err => {
this.loading = false
this.$message.error('菜单加载失败，请稍后再试！')
})
},
// 分页插件事件
callFather(parm) {
this.formInline.page = parm.currentPage
this.formInline.limit = parm.pageSize
this.getdata(this.formInline)
},
// 搜索事件
search() {
this.getdata(this.formInline)
},
//显示编辑界面
handleEdit: function (index, row) {
this.editFormVisible = true
if (row != undefined && row != 'undefined') {
this.title = '编辑'
this.editForm.id = row.id
this.editForm.summary = row.summary
this.editForm.content = row.content
} else {
this.title = '添加'
this.editForm.summary = ''
this.editForm.content = ''
}
console.log("编辑后的editForm", this.editForm);
},
// 编辑、增加页面保存方法
submitForm(editData) {
console.log("输入的数据", this.editForm.id, this.editForm.summary, this.editForm.content);
// 添加与编辑的区别是id是不是null
this.$refs[editData].validate(valid => {
if (valid) {
if (this.editForm.id == '') {
console.log("添加");
storyAdd(this.$store.state.openid, this.$store.state.token, this.editForm.summary, this.editForm.content)
.then(res => {
this.editFormVisible = false
this.loading = false
if (res) {
this.getdata(this.formInline)
this.$message({
type: 'success',
message: 'Story添加成功！'
})
} else {
this.$message({
type: 'info',
message: res.msg
})
}
})
} else {
console.log("编辑");
storyModify(this.editForm.id, this.$store.state.openid, this.$store.state.token, this.editForm.summary, this.editForm.content)
.then(res => {
this.editFormVisible = false
this.loading = false
if (res) {
this.getdata(this.formInline)
this.$message({
type: 'success',
message: 'Story编辑成功！'
})
} else {
this.$message({
type: 'info',
message: res.msg
})
}
})
}
} else {
return false
}
})
},
// 删除Story
deleteUser(index, row) {
this.$confirm('确定要删除吗?', '信息', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
console.log("准备删除");
storyDelete(row.id, this.$store.state.openid, this.$store.state.token)
.then(res => {
console.log(res);
if (res.data.code == 200) {
this.$message({
type: 'success',
message: 'Story已删除!'
})
this.getdata(this.formInline)
} else {
this.$message({
type: 'info',
message: res.data.message
})
}
})
.catch(err => {
this.loading = false
this.$message.error('Story删除失败，请稍后再试！')
})
.finally(() => {
this.$message({
type: 'info',
message: '删除操作完成'
});
});
})
.catch((e) => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
// 关闭编辑、增加弹出框
closeDialog() {
this.editFormVisible = false
}
}
}
</script>
<style scoped>
.user-search {
margin-top: 20px;
}
.userRole {
width: 100%;
}
</style>
结果
1、数据的添加、编辑、删除的渲染都是跟随操作实时的，UI也很好看
2、UI不满意的话添加类或者style直接改，另外element-ui中也有好多好看的组件
3、定位BUG非常快的方法是在控制台network界面查看网络请求，帮助解决（用到token的话注意token时间）
629
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
