代码拉取完成，页面将自动刷新
cnpm install
npm run serve
npm run build
npm run lint
adms.sql
localhost 到后台系统登录页 默认是超级管理员账号vue.config.js
html-webpack-plugin信息: 修改标题module.exports = {
// 修改或新增html-webpack-plugin的值，在index.html里面能读取htmlWebpackPlugin.options.title
chainWebpack: config => {
config.plugin('html')
.tap(args => {
args[0].title = '校友捐赠管理系统'
return args
})
}
}
assets: 放置静态资源文件views： 放的<router-view/> 显示的视图页面components: 放置模块所需要的组件router: 放置路由store: 放置vuex状态管理文件，并且单独写在一个文件，这里还没有进行模块管理，内容也不多utils: 放置一些工具类
axiosUtil: 对axios的请求进行封装，并使用element-ui组件进行提示 并在 main.js 添加到原型上checkUtil: 加入一些常用的校验规则, 包含手机号、邮箱、身份证号码storageUtil: 使用浏览器的session、local存储信息commonUtil: 通用工具类：判空main.js： 入口文件vue.config.js: webpack配置，标题，启动选项 {
path: '/',
redirect: '/login'
},
{
path: '/login',
name: 'Login',
component: () => import('@/views/Login')
},
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是一个函数，表示放行
// next() 放行 next('/login') 强制跳转
if (to.path === '/login') return next()
// 获取token
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login')
next()
})
axios.interceptors.request.use(config => {
config.headers.Authorization = window.sessionStorage.getItem('token')
// 在最后必须 return config
return config
})
window.sessionStorage.setItem('token', res.data.token)
<el-breadcrumb-item>{{msg2}}</el-breadcrumb-item>
<script>
export default {
props: ['msg1', 'msg2']
}
</script>
:
<Breadcrumb msg1="基本信息管理" :msg2="常数类别列表" />
<script>
import Breadcrumb from '@/components/Breadcrumb'
export default {
components: {
Breadcrumb
},
}
</script>
<el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" width="500px">
<ConstantTypeEdit v-if="show" :show.sync="show" @getData="getData()" :editid="editid"></ConstantTypeEdit>
</el-dialog>
<script>
export default {
name: 'ConstantTypeEdit',
props: ['editid'],
methods: {
save () {
// 方法表达对其赋新值 :show.sync="show" 修改父组件show = false
this.$emit('update:show', false)
}
}
}
}
</script>
原理图
将vuex不同属性定义再不同的文件里，这里举一个左侧菜单栏的折叠功能
//state.js
export default {
isCollapse: false
}
// 推荐把mutation里的方法采用变量定义，且将方法名定义到另外一个常量文件里 比如mutation-types.js
export const TOGGLE_COLLAPSE = 'toggleCollapse' // 折叠左侧菜单栏
// mutation.js
import { TOGGLE_COLLAPSE } from './mutation-types'
export default {
[TOGGLE_COLLAPSE] (state) {
state.isCollapse = !state.isCollapse
}
}
// action
import { TOGGLE_COLLAPSE } from './mutation-types'
export default {
toggle_collapse ({ commit }) {
commit(TOGGLE_COLLAPSE)
}
}
Menu.vueimport { mapState } from 'vuex'
export default {
/*
从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态
当 状态 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
获取方式一： this.$store.state.isCollapse
通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。
获取方式二： 使用 mapState 辅助函数帮助生成计算属性 并且使用了对象展开运算符 传对象的时候方便自己定义名称
*/
computed: {
...mapState({
isCollapse: 'isCollapse'
})
}
}
Home.vueimport { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState({
isCollapse: 'isCollapse'
})
},
methods: {
/*
在组件中使用 this.$store.dispatch('xxx') 分发 action
mapActions 是action的辅助函数 ，同时可以传数组，选择自己需要的action 函数
*/
...mapActions([
'toggleCollapse'
])
},
}
@Override
public boolean batchdel(Integer[] ids) {
ConstantType constantType = new ConstantType();
constantType.setActive(0);
UpdateWrapper<ConstantType> wrapper = new UpdateWrapper<>();
List<Integer> list = new ArrayList<>(ids.length);
Collections.addAll(list,ids);
wrapper.in("id",list);
return this.update(constantType,wrapper);
}
http://127.0.0.1:8088/constantTypes/batchdel?ids[]=6
未对数据使用深度序列化，需要配置选择,分割的方式降低难度batchdel () {
if (this.selectedrow.length === 0) {
this.$message('没有任何被选中的数据')
} else {
const ids = []
for (let i = 0; i < this.selectedrow.length; i++) {
ids.push(this.selectedrow[i].id)
}
this.$axios.del('/constantTypes/batchdel',
() => {
if (this.total === (this.queryInfo.page - 1) * this.queryInfo.limit + ids.length) this.queryInfo.page -= 1
this.getData()
},
{
ids: ids.join(',')
}
)
}
},
@DeleteMapping("/batchdel")
public Result batchDel(@RequestParam String ids){
String [] idList = ids.split(",");
List<Integer> list = new ArrayList<>(idList.length);
for (String id:idList){
list.add(Integer.parseInt(id));
}
if(constantTypeService.removeByIds(list)) return ResultGenerator.getSuccessResult("","删除成功");
return ResultGenerator.getFailResult("","删除失败");
}
data () {
// name 必须唯一的
var checkName = (rule, value, cb) => {
// console.log(value)
// value 传入的校验值
const promise = this.$axios.http.get('/constantTypes/check', { params: { name: value } })
promise.then(
response => {
if (response.data.status !== 200) {
// 返回ERROR 表示 验证不符合要求
cb(new Error('该常数类别代码存在'))
}
// 这是返回正确的
cb()
}
)
},
rules: {
code: [
{ required: true, message: '编码不能为空', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' },
{ validator: checkName, trigger: 'blur' }
]
}
}
}
对axios进行一些处理，包装一下
定义自己的请求基路径axios.defaults.baseURL
为了能够在全局使用把axios挂载到Vue函数对象的原型上Vue.prototype.$axios = axios，这样在组件里通过this.$axios访问
./指当前目录../指当前目录的上一层目录@代表“src目录”这个是webpack起的别名；在webpack.base.conf.js中有声明extensions: 在导入语句没带文件后缀时，webpack会自动按照顺序添加后缀名查找// 连接路径并返回
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
resolve: {
// 在导入语句没带文件后缀时，webpack会自动按照顺序添加后缀名查找
extensions: ['.js', '.vue', '.json'],
// 配置别名
alias: {
'vue$': 'vue/dist/vue.esm.js',
// 将项目根目录中，src的路径配置为别名@
'@': resolve('src'),
}
}
}
resolve.mainFiles: ["index"] 解析目录时要使用的文件名。() => import('@/views/constant-type') 以及实际项目情况对应的路径是 项目根路径/src/views/constant-type/index.vue
在浏览器的中对'/home' 中/ 会解析为 协议://主机名:端口号/ 再拼接上home 作为路径
this.$axios.del(`/constantTypes/${id}`, () => {
if (this.total === (this.queryInfo.page - 1) * this.queryInfo.limit + 1) this.queryInfo.page -= 1
this.getData()
})
<!-- 默认是插入到body -->
<el-select v-model="form.deptId" placeholder="请选择" :popper-append-to-body="false">
<!-- 添加自己样式 -->
<style scoped>
.el-select-dropdown {
top: 38px !important;
left: 0 !important;
}
</style>
使用Steps步骤条和Tabs 选项卡组件的 使用 :active="parseInt(activeIndex)" 两者使用不同的类型
Steps active 是需要数值Tab name 需要字符串element-ui checkbox
{{}} 不能true-label和false-label 指定相同的值，不然如何点击<el-checkbox border
v-for="(role, id) in roles"
:key="id"
:label="id"
>{{role.name}}</el-checkbox>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。