first commit

src/App.vue

@@ -1,32 +1,10 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
+    
     <router-view/>
   </div>
 </template>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
 
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
 </style>

src/element-ui.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+Vue.use(ElementUI);

src/main.js

@@ -1,10 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
-import router from './router'
+import router from './router/index.js'
 import store from './store'
-
+import "./element-ui.js"
+import axios from "axios"
 Vue.config.productionTip = false
-
+axios.defaults.baseURL = 'http://127.0.0.1:3002';
+Vue.prototype.axios = axios
 new Vue({
   router,
   store,

src/router/index.js

@@ -16,7 +16,11 @@ const routes = [
     // 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/About.vue')
+    component: () => import('../views/About.vue')
+  },
+  {
+    path:"/login",
+    component: ()=> import("@/views/Login.vue")
   }
 ]
 
@@ -26,4 +30,6 @@ const router = new VueRouter({
   routes
 })
 
+
 export default router
+

src/store/index.js

@@ -5,8 +5,12 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    count: 1
   },
   mutations: {
+    add(state){
+      state.count++
+    }
   },
   actions: {
   },

src/views/Home.vue

@@ -1,18 +1,24 @@
 <template>
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    {{this.$store.state.count}}
+    <button @click="add">dianwo+1</button>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+// import HelloWorld from '@/compocnents/HelloWorld.vue'
 
 export default {
   name: 'Home',
   components: {
-    HelloWorld
+    // HelloWorld
+  },
+  methods:{
+    add(){
+      this.$store.commit("add")
+    }
   }
 }
 </script>

src/views/Login.vue

@@ -0,0 +1,110 @@
+<template>
+    <div class="back">
+        <div class="box">
+            <div>
+                <p>用户名：</p>
+                <el-input v-model="user" placeholder="请输入用户名"></el-input>
+            </div>
+            <div>
+                <p>密码：</p>
+                <el-input
+                    v-model="pwd"
+                    show-password
+                    placeholder="请输入密码"
+                ></el-input>
+            </div>
+            <div class="button">
+                <el-button type="success" @click="login">登录</el-button>
+                <el-button @click="register" type="primary">注册</el-button>
+            </div>
+        </div>
+    </div>
+</template>
+<style scoped>
+.back {
+    background-image: url("../assets/0.jpg");
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.box {
+    width: 400px;
+    height: 200px;
+    background-color: #fff;
+    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+}
+.box > div {
+    width: 80%;
+    display: flex;
+    align-items: center;
+}
+.box > div > p {
+    flex-shrink: 0;
+    width: 80px;
+}
+.button {
+    display: flex;
+    justify-content: flex-end;
+}
+</style>
+<script>
+export default {
+    data() {
+        return {
+            user: "",
+            pwd: "",
+        };
+    },
+    methods: {
+        login() {
+            console.log(this.user, this.pwd);
+            this.axios
+                .get("/login", {
+                    params: {
+                        pwd: this.pwd,
+                        user: this.user,
+                    },
+                })
+                .then((res) => {
+                    console.log(res.data);
+                    if (res.data.code == 500) {
+                        this.$message.error(res.data.msg);
+                    }else{
+                        this.$message({
+                            message: "登录成功",
+                            type: "success",
+                        });
+                        localStorage.setItem("token",res.data.token)
+                    }
+                });
+        },
+        register() {
+            this.axios
+                .get("/register", {
+                    params: {
+                        pwd: this.pwd,
+                        user: this.user,
+                    },
+                })
+                .then((res) => {
+                    console.log(res.data);
+                    if (res.data.code == 1) {
+                        this.$message.error("注册失败");
+                    } else {
+                        this.$message({
+                            message: "注册成功",
+                            type: "success",
+                        });
+                    }
+                });
+        },
+    },
+};
+</script>