建表语句
CREATE TABLE t_notice (
newsid int(11) NOT NULL AUTO_INCREMENT,
newsname varchar(255) DEFAULT NULL,
newscontent varchar(2000) DEFAULT NULL,
visible varchar(1) DEFAULT NULL,
ordernum varchar(10) DEFAULT NULL,
PRIMARY KEY (newsid)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
编辑器选择：quill-editor
安装
我们需要cnpm进行安装，安装命令如下：
cnpm install vue-quill-editor --save
再安装quill依赖
cnpm install quill
在main.js里引用
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
页面上使用
把editor制作成控件common/quill
<template>
<div class="edit_container">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
<!-- <button @click="toParent">确认</button> -->
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
content: `<p>hello world</p>`,
editorOption: {}
}
},computed: {
editor() {
return this.$refs.myQuillEditor.quill;
},
},methods: {
onEditorReady(editor) { // 准备编辑器
},
onEditorBlur(){
alert(this.content);
this.$emit("toParent", this.content);
}, // 失去焦点事件
onEditorFocus(){}, // 获得焦点事件
onEditorChange(){}// 内容改变事件
/* , // 内容改变事件
toParent:function(event){
alert(this.content);
this.$emit("toParent", this.content);
} */
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
addNotice.vue
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="公告名称" prop="newsName">
<el-input v-model="ruleForm.newsName"></el-input>
</el-form-item>
<el-form-item label="公告内容" prop="newscontent">
<quill v-model="ruleForm.newscontent" @toParent="getcontent"></quill>
</el-form-item>
<el-form-item label="排序" prop="orderNum">
<el-input-number v-model="ruleForm.orderNum" :min="0" :max="50" label="排序"></el-input-number>
</el-form-item>
<el-form-item label="公开" prop="visible">
<el-radio v-model="ruleForm.visible" label="0">公开</el-radio>
<el-radio v-model="ruleForm.visible" label="1">隐藏</el-radio>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
import quill from '@/components/common/quill'
export default {
data() {
return {
ruleForm: {
newsName:this.$route.query.newsName,//公告名称
newscontent:this.$route.query.newscontent,//公告内容
visible:this.$route.query.visible,//是否公开
orderNum:this.$route.query.orderNum//排序
},
};
},
methods: {
getcontent(content){
this.ruleForm.newscontent=content;
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
alert(this.ruleForm.newscontent);
let obj=this.$qs.stringify(this.ruleForm);
alert(this.obj);
this.$axios.post('http://localhost:8082/vue-servlet/addNotice',obj)
.then(response=>{
alert(response.data.code);
alert(response.data.msg);
})
.catch(error=>{
console.log(error)
})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
components:{
quill
}
}
</script>
<style>
</style>
findAllNotoice.vue
<template>
<div>
<div class="nav" >
<el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">新增</el-button>
</div>
<el-dialog title="公告添加" :visible.sync="dialogFormVisible">
<addNotice></addNotice>
</el-dialog>
<el-table v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="newsname" label="公告名称" width="120">
</el-table-column>
<el-table-column prop="newscontent" label="公告内容" width="200">
</el-table-column>
<el-table-column prop="ordernum" label="排序" width="200">
</el-table-column>
<el-table-column prop="visible" label="公开" width="120">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="changePage">
</el-pagination>
</div>
</template>
<script>
import addNotice from '@/components/notice/addNotice'
export default {
data() {
return {
tableData: [],
multipleSelection: [],
total: 0,
pageSize: 2,
currentPage: 1,
dialogFormVisible: false,
loading: false
}
},
mounted() {
//查询所有
this.findAll();
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
findAll() {
/* this.loading = true;
this.$axios.get("http://localhost:8082/vue-servlet/findAllNews", {
params: {
currentPage: this.currentPage,
pageSize: this.pageSize
}
})
.then(response => {
let data = response.data;
this.tableData = data.list;
this.total = data.page.count;
this.loading = false;
})
.catch() */
},
changePage: function(currentPage) {
this.currentPage = currentPage;
this.findAll();
},
handleEdit(index, row) {
},
handleDelete(index, row) {
alert(row.id);
}
},
components: {
addNotice
}
}
</script>
<style>
.nav {
text-align: left;
height: 50px;
margin: 10px;
}
.el-main {
line-height: 0;
}
</style>
配置路由router/index.js
{
path: '/findallnotice',
name: 'findallnotice',
component: findallnotice
},
通过管理界面添加菜单及授权
1、添加菜单
2、添加或修改角色并授菜单权
3、添加或修改用户角色
网友评论