new

vue-admin-template-master/src/api/level.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+//获取等级列表
+export function getLevel() {
+  return request({
+    url: '/showLevel',
+    method: 'get'
+  })
+}
+
+//提交等级列表
+export function addLevel(data) {
+  return request({
+    url: '/insertOneLevel',
+    method: 'post',
+    data
+  })
+}

vue-admin-template-master/src/views/level/addLevel.vue

@@ -1,13 +1,74 @@
 <template>
-  
+  <div class="add-list">
+    <el-form
+      :model="ruleForm"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+      :rules = "rules"
+    >
+      <el-form-item label="等级名称" prop="levelname">
+        <el-input v-model="ruleForm.levelname"></el-input>
+      </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>
+  </div>
 </template>
 
 <script>
+import { addLevel } from "@/api/level";
 export default {
-
-}
+  data() {
+    return {
+      ruleForm: {
+        levelname: "",
+      },
+      rules:{
+        levelname: [
+          { required: true, message: '请输入等级名称', trigger: 'blur' },
+        ]
+      }
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          addLevel({
+            levelname: this.ruleForm.levelname,
+          })
+            .then((res) => {
+              this.$message({
+                type: "success",
+                message: "提交成功!",
+              });
+              this.$refs[formName].resetFields();
+              this.$router.push('/level/levelList')
+            })
+            .catch((err) => {
+              console.log(err);
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
 </script>
 
-<style>
-
+<style scoped>
+.add-list{
+  width: 500px;
+  margin: 100px auto 0;
+}
 </style>

vue-admin-template-master/src/views/level/levelList.vue

@@ -1,13 +1,42 @@
 <template>
-  
+  <div class="level-list">
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column type="index" width="50"> </el-table-column>
+      <el-table-column prop="jrid" label="等级id" width="180">
+      </el-table-column>
+      <el-table-column prop="levelname" label="等级名称" width="180">
+      </el-table-column>
+    </el-table>
+  </div>
 </template>
 
 <script>
+import { getLevel } from "@/api/level";
 export default {
-
-}
+  data() {
+    return {
+      tableData: [],
+    };
+  },
+  methods: {
+    //获取等级列表
+    getLevelList() {
+      //axios.get('url')
+      getLevel().then((res) => {
+        console.log(res.data);
+        this.tableData = res.data;
+      });
+    },
+  },
+  created() {
+    this.getLevelList();
+  },
+};
 </script>
 
-<style>
-
+<style scoped>
+.level-list {
+  width: 500px;
+  margin: 100px auto 0;
+}
 </style>