npm install -g vue-cli
vue init webpack 包名
cd 包名
npm install
npm install element-ui -S
main.js界面
?http.js拦截器
import axios from 'axios'
import qs from 'qs'
import action from '@/api/action'
axios.urls = action
axios.defaults.timeout = 10000; // 超时时间
axios.defaults.baseURL = action.SERVER;
axios.defaults.transformRequest = function(data) {
?? ?data = qs.stringify(data);
?? ?return data;
};
axios.interceptors.request.use(function(config) {
?? ?return config;
}, function(error) {
?? ?return Promise.reject(error);
});
axios.interceptors.response.use(function(response) {
?? ?return response;
}, function(error) {
?? ?return Promise.reject(error);
});
export default axios;
BookList页面布局
<template>
?? ?<div>
?? ??? ?<h1>图书管理</h1>
?? ??? ?<el-form :inline="true" class="demo-form-inline">
?? ??? ? ?<el-form-item label="书本查询">
?? ??? ??? ?<el-input v-model="bookname" placeholder="书本查询"></el-input>
?? ??? ? ?</el-form-item>
?? ??? ? ?<el-form-item>
?? ??? ??? ?<el-button type="primary" @click="qry">查询</el-button>
?? ??? ??? ?<el-button type="primary" @click="add">增加</el-button>
?? ??? ? ?</el-form-item>
?? ??? ?</el-form>
?? ??? ?<el-table
?? ??? ?:data="books"
?? ??? ?border
?? ??? ?style="width: 100%">
?? ??? ?<el-table-column
?? ??? ??? ?prop="id"
?? ??? ??? ?label="书名id"
?? ??? ??? ?width="180">
?? ??? ?</el-table-column>
?? ??? ?<el-table-column
?? ??? ??? ?prop="bookname"
?? ??? ??? ?label="书名"
?? ??? ??? ?width="180">
?? ??? ?</el-table-column>
?? ??? ?<el-table-column
?? ??? ??? ?prop="price"
?? ??? ??? ?label="价格">
?? ??? ?</el-table-column>
?? ??? ?<el-table-column
?? ??? ??? ?prop="booktype"
?? ??? ??? ?label="类型">
?? ??? ?</el-table-column>
?? ??? ?</el-table>
?? ??? ?
?? ??? ?<el-dialog title="书本" :visible.sync="dialogFormVisible">
?? ??? ? ?<el-form :model="form" :rules="rules" ref="ruleForm">
?? ??? ??? ?<el-form-item label="书本名称" prop="bookname" :label-width="formLabelWidth">
?? ??? ??? ? ?<el-input v-model="form.bookname" autocomplete="off"></el-input>
?? ??? ??? ?</el-form-item>
?? ??? ??? ?<el-form-item label="书本价格" prop="price" :label-width="formLabelWidth">
?? ??? ??? ?<el-input v-model="form.price" autocomplete="off"></el-input>
?? ??? ??? ?</el-form-item>
?? ??? ??? ?<el-form-item label="书本类型" prop="booktype" :label-width="formLabelWidth">
?? ??? ??? ? ?<el-select v-model="form.booktype" placeholder="请选择书本类型">
?? ??? ??? ??? ?<el-option label="恐怖" value="恐怖"></el-option>
?? ??? ??? ??? ?<el-option label="散文" value="散文"></el-option>
?? ??? ??? ? ?</el-select>
?? ??? ??? ?</el-form-item>
?? ??? ? ?</el-form>
?? ??? ? ?<div slot="footer" class="dialog-footer">
?? ??? ??? ?<el-button @click="dialogFormVisible = false">取 消</el-button>
?? ??? ??? ?<el-button type="primary" @click="save">确 定</el-button>
?? ??? ? ?</div>
?? ??? ?</el-dialog>
?? ?</div>
?? ?
</template>
<script>
?? ?export default {
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?bookname:'',
?? ??? ??? ??? ?books:[],
?? ??? ??? ??? ?dialogFormVisible:false,
?? ??? ??? ??? ?formLabelWidth:"100px",
?? ??? ??? ??? ?
?? ??? ??? ??? ?form:{},
?? ??? ??? ??? ?rules:{
?? ??? ??? ??? ??? ? bookname: [
?? ??? ??? ??? ??? ??? ?{ required: true, message: '请输入书本名称', trigger: 'blur' }
?? ??? ??? ??? ??? ? ?],
?? ??? ??? ??? ??? ? price:[
?? ??? ??? ??? ??? ??? ? { required: true, message: '请输入书本价格', trigger: 'blur' }
?? ??? ??? ??? ??? ? ],
?? ??? ??? ??? ??? ? booktype: [
?? ??? ??? ??? ??? ? { required: true, message: '请输入书本类型', trigger: 'blur' }
?? ??? ??? ??? ??? ? ]
?? ??? ??? ??? ?}
?? ??? ??? ?};
?? ??? ?},
?? ??? ?methods:{
?? ??? ??? ?qry() {
?? ??? ??? ??? ?let url = this.axios.urls.BOOK_QRY;
?? ??? ??? ??? ?let param = {
?? ??? ??? ??? ??? ?bookname:this.bookname
?? ??? ??? ??? ?}
?? ??? ??? ??? ?this.axios.get(url,{
?? ??? ??? ??? ??? ?params:param
?? ??? ??? ??? ?}).then(resp => {
?? ??? ??? ??? ??? ?if(resp.data.code == 0){
?? ??? ??? ??? ??? ??? ?this.books = resp.data.data;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?})
?? ??? ??? ?},
?? ??? ??? ??? ?
?? ??? ??? ?add() {
?? ??? ??? ??? ?this.dialogFormVisible = true;
?? ??? ??? ??? ?this.$ref['form'].resetFields();
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ?},
?? ??? ??? ?
?? ??? ??? ?reset() {
?? ??? ??? ??? ?
?? ??? ??? ??? ?this.bookname = "";
?? ??? ??? ??? ?this.price = "";
?? ??? ??? ??? ?this.booktype = "";
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ?},
?? ??? ??? ?save() {
?? ??? ??? ??? ?let url = this.axios.urls.BOOK_ADD;
?? ??? ??? ??? ? this.$refs['form'].validate((valid) => {
?? ??? ??? ??? ??? ? ?if (valid) {
?? ??? ??? ??? ??? ??? ?this.axios.post(url,this.form).then(resp =>{
?? ??? ??? ??? ??? ??? ??? ?if(resp.data.code == 0){
?? ??? ??? ??? ??? ??? ??? ??? ?this.$message({
?? ??? ??? ??? ??? ??? ??? ??? ?message: '添加成功',
?? ??? ??? ??? ??? ??? ??? ??? ?type: 'success'
?? ??? ??? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ??? ??? ??? ?this.qry();
?? ??? ??? ??? ??? ??? ??? ??? ?this.dialogFormVisible = false;
?? ??? ??? ??? ??? ??? ??? ??? ?this.reset();
?? ??? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ??? ??? ?this.$message({
?? ??? ??? ??? ??? ??? ??? ??? ?message: '添加失败',
?? ??? ??? ??? ??? ??? ??? ??? ?type: 'error'
?? ??? ??? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ? ?} else {
?? ??? ??? ??? ??? ??? ?console.log('error submit!!');
?? ??? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ??? ? ?}
?? ??? ??? ??? ??? ?});
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ?}
?? ?}
</script>
<style>
</style>
?