做网站需要考虑哪些问题,國家建设协会官方网站,网站首页制作,什么是网站建设策划ElementUI安装与使用指南
前端代码#xff1a;点击查看learnelementuispringboot项目源码
后端代码#xff1a;点击查看 LearnElementUiAndSpringBoot
一、前端配置
安装axios
axios官网axios中文文档安装指令#xff1a;npm install axios 二、后端配置
springboot3m…ElementUI安装与使用指南
前端代码点击查看learnelementuispringboot项目源码
后端代码点击查看 LearnElementUiAndSpringBoot
一、前端配置
安装axios
axios官网axios中文文档安装指令npm install axios 二、后端配置
springboot3mybatis-plus 官网安装教程MySQL数据库 数据库book表的结构如下图 效果图 crud-query-delete.vueCRUD实例页面效果图 crud-update.vue编辑页面效果图 crud-insert.vue添加页面效果图 项目结构 一、后端 二、前端 三、前端代码
1、crud-query-delete.vue代码
import Vue from vue
import VueRouter from vue-router
import HomeView from ../views/HomeView.vue
import ElementUI from /views/ElementUI.vue;
import PagePath from /components/PagePath.vue;
import ElButton from /views/el-button.vue;
import ElLink from /views/el-link.vue;
import ElRadio from /views/el-radio.vue;
import ElRow_elCol from /views/el-row_el-col.vue;
import ElContainer from /views/el-container.vue;
import ElContainerExample from /views/el-container-example.vue;
import ElCheckbox from /views/el-checkbox.vue;
import ElInput from /views/el-input.vue;
import ElInputNumber from /views/el-input-number.vue;
import ElSwitch from /views/el-switch.vue;
import ElUpload from /views/el-upload.vue;
import ElForm from /views/el-form.vue;
import ElSelect from /views/el-select.vue;
import ElTable from /views/el-table.vue;
import CrudQueryDelete from /views/crud-query-delete.vue;
import CrudUpdate from /views/crud-update.vue;
import CrudInsert from /views/crud-insert.vue;Vue.use(VueRouter)const routes [{path: PagePath.crud_insert,name: crud-insert,component: CrudInsert},{path: PagePath.crud_update,name: crud-update,component: CrudUpdate},{path: PagePath.crud_query_delete,name: crud-query-delete,component: CrudQueryDelete},{path: PagePath.el_table,name: el-table,component: ElTable},{path: PagePath.el_select,name: el-select,component: ElSelect},{path: PagePath.el_form,name: el-form,component: ElForm},{path: PagePath.el_upload,name: el-upload,component: ElUpload},{path: PagePath.el_switch,name: el-switch,component: ElSwitch},{path: PagePath.el_input_number,name: el-input-number,component: ElInputNumber},{path: PagePath.el_input,name: el-input,component: ElInput},{path: PagePath.el_checkbox,name: el-checkbox,component: ElCheckbox},{path: PagePath.el_container_example,name: el-container-example,component: ElContainerExample},{path: PagePath.el_container,name: el-container,component: ElContainer},{path: PagePath.el_row_el_col,name: el-row_el-col,component: ElRow_elCol},{path: PagePath.el_radio,name: el-link,component: ElRadio},{path: PagePath.el_link,name: el-link,component: ElLink},{// path: /el_button,// path: PagePath.data().el_button,path: PagePath.el_button,name: el-button,component: ElButton},{path: /element_ui,name: element-ui,component: ElementUI},{path: /,name: home,component: HomeView},{path: /about,name: about,// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () import(/* webpackChunkName: about */ ../views/AboutView.vue)}
]const router new VueRouter({mode: history,base: process.env.BASE_URL,routes
})export default router
2、crud-update.vue代码
script
import axios from axios;
import pagePath from /components/PagePath.vue;const BASE_URL http://localhost:8081/book/export default {name: crud_update,created() {let _this this;axios.get(BASE_URL findById/ this.$route.query.bookid).then(resp {console.log(resp.data)_this.book resp.data})},data() {return {book: {bookid: 0,name: ,price: 0,},rules: {name: [{required: true, message: 请输入名称, trigger: blur},{min: 1, max: 10, message: 长度在 1 到 10 个字符, trigger: blur}],}}},methods: {submitForm(book) {let _this this//这个是全局的this.$refs[book].validate((valid) {if (valid) {console.log(this.book);axios.put(BASE_URL update, this.book).then(resp {if (resp.data) {_this.$alert(《 _this.book.name 》修改成功, 提示, {confirmButtonText: 确定,callback: action {_this.$router.push(pagePath.crud_query_delete)}});}})} else {console.log(error submit!!);return false;}});},},
}/scripttemplatediv classel_update_rootel-form refform :modelbook label-width80px :rulesrulesel-form-item label编号 propbookid :rules[{required:true, message:id不能为空},{type:number, message: id必须为数字}]!-- 编号不能修改只读 --el-input v-model.numberbook.bookid readonly//el-form-itemel-form-item label名称 propnameel-input v-modelbook.name placeholder请输入名称//el-form-itemel-form-item label价格 propprice :rules[{required:true, message:价格不能为空},{type:number, message: 价格必须为数字}]el-input v-model.numberbook.price placeholder请输入价格//el-form-itemel-form-itemel-button typeprimary clicksubmitForm(form)提交/el-buttonel-button取消/el-button/el-form-item/el-form/div/templatestyle
.el_update_root {margin-left: 300px;margin-right: 300px;text-align: left;display: flex;justify-content: center;
}/style3、crud_insert.vue代码
script
import axios from axios;
import pagePath from /components/PagePath.vue
const BASE_URL http://localhost:8081/book/export default {name: crud_insert,data() {return {book: {bookid: ,name: ,price: ,},rules: {name: [{required: true, message: 请输入名称, trigger: blur},{min: 1, max: 10, message: 长度在 1 到 10 个字符, trigger: blur}],}}},methods: {submitForm(book) {let _this this//这个是全局的this.$refs[book].validate((valid) {if (valid) {console.log(this.book);axios.post(BASE_URL add, this.book).then(resp {if (resp.data) {_this.$alert(《 _this.book.name 》添加成功, 提示, {confirmButtonText: 确定,callback: action {_this.$router.push(pagePath.crud_query_delete)}});}})} else {console.log(error submit!!);return false;}});},},
}/scripttemplatediv classel_insert_rootel-form refform :modelbook label-width80px :rulesrulesel-form-item label编号 propbookid :rules[{required:true, message:id不能为空},{type:number, message: id必须为数字}]!-- 编号不能修改只读 --el-input v-model.numberbook.bookid placeholder请输入编号//el-form-itemel-form-item label名称 propnameel-input v-modelbook.name placeholder请输入名称//el-form-itemel-form-item label价格 propprice :rules[{required:true, message:价格不能为空},{type:number, message: 价格必须为数字}]el-input v-model.numberbook.price placeholder请输入价格//el-form-itemel-form-itemel-button typeprimary clicksubmitForm(form)提交/el-buttonel-button取消/el-button/el-form-item/el-form/div/templatestyle
.el_insert_root {margin-left: 300px;margin-right: 300px;text-align: left;display: flex;justify-content: center;
}/style以上就是Element UISpring Boot进行CRUD的实例全部内容讲解。
