il y a 5 ans · 8c4776f00c
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -15,5 +15,6 @@ module.exports = {
 
				     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
			
 
				     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
			
 
				     'import/prefer-default-export': 'off',
			
 
				+    'max-len': ['error', { code: 140, ignoreTrailingComments: true }],
			
 
				   },
			
 
				 };
			
--- a/mock/index.js
+++ b/mock/index.js
@@ -1,7 +1,6 @@
 
				 /* eslint-disable import/no-extraneous-dependencies */
			
 
				 /* eslint-disable @typescript-eslint/no-var-requires */
			
 
				 const express = require('express');
			
 
				-const Mock = require('mockjs');
			
 
				 const bodyParser = require('body-parser');
			
 
				 
			
 
				 const app = express();
			
@@ -20,6 +19,7 @@ app.use((req, res, next) => {
 
				 
			
 
				 const prefix = '/api';
			
 
				 
			
 
				-app.use(`${prefix}/user`, require('./user'));
			
 
				+app.use(`${prefix}/user`, require('./routers/user'));
			
 
				+app.use(`${prefix}/project`, require('./routers/project'));
			
 
				 
			
 
				 app.listen(4000);
			
--- a/mock/routers/project.js
+++ b/mock/routers/project.js
@@ -0,0 +1,26 @@
 
				+/* eslint-disable import/no-extraneous-dependencies */
			
 
				+/* eslint-disable @typescript-eslint/no-var-requires */
			
 
				+const router = require('express').Router();
			
 
				+const Mock = require('mockjs');
			
 
				+const wrapper = require('../wrapper');
			
 
				+
			
 
				+const { Random } = Mock;
			
 
				+
			
 
				+router.get('/all',
			
 
				+  (req, res) => {
			
 
				+    const query = req.query || {};
			
 
				+    const { userId } = query;
			
 
				+    res.json(wrapper(
			
 
				+      Mock.mock({
			
 
				+        userId,
			
 
				+        'projectList|1-10': [
			
 
				+          {
			
 
				+            'projectId|+1': 100,
			
 
				+            name: Random.ctitle(10),
			
 
				+          },
			
 
				+        ],
			
 
				+      }),
			
 
				+    ));
			
 
				+  });
			
 
				+
			
 
				+module.exports = router;
			
--- a/mock/routers/user.js
+++ b/mock/routers/user.js
@@ -1,7 +1,7 @@
 
				 /* eslint-disable import/no-extraneous-dependencies */
			
 
				 /* eslint-disable @typescript-eslint/no-var-requires */
			
 
				 const router = require('express').Router();
			
 
				-const wrapper = require('./wrapper');
			
 
				+const wrapper = require('../wrapper');
			
 
				 
			
 
				 router.get('/info/:id',
			
 
				   (req, res) => res.json(wrapper({
			
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 
				 <!DOCTYPE html>
			
 
				-<html lang="">
			
 
				+<html lang="zh-CN">
			
 
				   <head>
			
 
				     <meta charset="utf-8">
			
 
				     <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,37 +1,37 @@
 
				 <template>
			
 
				-  <div id="nav">
			
 
				-    <router-link to="/">Home</router-link> |
			
 
				-    <router-link to="/login">Login</router-link>
			
 
				-  </div>
			
 
				-  <router-view/>
			
 
				+  <el-container>
			
 
				+    <el-header>
			
 
				+      <Header></Header>
			
 
				+    </el-header>
			
 
				+    <el-main>
			
 
				+      <router-view/>
			
 
				+    </el-main>
			
 
				+  </el-container>
			
 
				 </template>
			
 
				 
			
 
				 <script lang="ts">
			
 
				 import { defineComponent } from 'vue';
			
 
				+import Header from '@/components/Header.vue';
			
 
				 
			
 
				 export default defineComponent({
			
 
				+  components: { Header },
			
 
				 });
			
 
				 </script>
			
 
				 
			
 
				 <style lang="scss">
			
 
				+* {
			
 
				+  margin: 0;
			
 
				+  padding: 0;
			
 
				+}
			
 
				+html, body {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+}
			
 
				+
			
 
				 #app {
			
 
				-  font-family: Avenir, Helvetica, Arial, sans-serif;
			
 
				+  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB",
			
 
				+  "Microsoft YaHei","微软雅黑",Arial,sans-serif;
			
 
				   -webkit-font-smoothing: antialiased;
			
 
				   -moz-osx-font-smoothing: grayscale;
			
 
				-  text-align: center;
			
 
				-  color: #2c3e50;
			
 
				-}
			
 
				-
			
 
				-#nav {
			
 
				-  padding: 30px;
			
 
				-
			
 
				-  a {
			
 
				-    font-weight: bold;
			
 
				-    color: #2c3e50;
			
 
				-
			
 
				-    &.router-link-exact-active {
			
 
				-      color: #42b983;
			
 
				-    }
			
 
				-  }
			
 
				 }
			
 
				 </style>
			
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,5 +1,6 @@
 
				-import * as User from './user';
			
 
				+import * as UserAPI from './user';
			
 
				+import * as ProjectAPI from './project';
			
 
				 
			
 
				 export {
			
 
				-  User,
			
 
				+  UserAPI, ProjectAPI,
			
 
				 };
			
--- a/src/api/project.ts
+++ b/src/api/project.ts
@@ -0,0 +1,7 @@
 
				+import axios from '@/utils/axios';
			
 
				+
			
 
				+export const getProjectList = (userId: number) => axios.get('/project/all', {
			
 
				+  params: {
			
 
				+    userId,
			
 
				+  },
			
 
				+});
			
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -1,12 +1,12 @@
 
				 import axios from '@/utils/axios';
			
 
				 
			
 
				-export const getUserInfo = (id: number) => axios.get(`/user/info/${id}`);
			
 
				+export const getUserInfo = (userId: number) => axios.get(`/user/info/${userId}`);
			
 
				 
			
 
				-export const getUserInfo2 = (id: number) => axios.get('/user/info', {
			
 
				-  params: { id },
			
 
				+export const getUserInfo2 = (userId: number) => axios.get('/user/info', {
			
 
				+  params: { userId },
			
 
				 });
			
 
				 
			
 
				 export const post = () => axios.post('/user/post', {
			
 
				-  id: 3,
			
 
				+  userId: 3,
			
 
				   gender: 'male',
			
 
				 });
			
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -0,0 +1,29 @@
 
				+<template>
			
 
				+  <h1 class="nav-logo">LOGO</h1>
			
 
				+  <ul>
			
 
				+    <li class="nav-notification">
			
 
				+      <router-link to="/notification">notification</router-link>
			
 
				+    </li>
			
 
				+    <li class="nav-user">avatar</li>
			
 
				+  </ul>
			
 
				+</template>
			
 
				+
			
 
				+<script lang="ts">
			
 
				+import { defineComponent } from 'vue';
			
 
				+
			
 
				+export default defineComponent({
			
 
				+
			
 
				+});
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss">
			
 
				+header {
			
 
				+  & > ul {
			
 
				+    list-style: none;
			
 
				+    float:right;
			
 
				+    & > li {
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+}
			
 
				+}
			
 
				+</style>
			
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,36 +0,0 @@
 
				-<template>
			
 
				-  <div class="hello">
			
 
				-    <h1>{{ msg }}</h1>
			
 
				-  </div>
			
 
				-</template>
			
 
				-
			
 
				-<script lang="ts">
			
 
				-import { defineComponent } from 'vue';
			
 
				-
			
 
				-export default defineComponent({
			
 
				-  props: {
			
 
				-    msg!: String,
			
 
				-  },
			
 
				-  setup(props) {
			
 
				-    console.log(props.msg);
			
 
				-  },
			
 
				-});
			
 
				-</script>
			
 
				-
			
 
				-<!-- Add "scoped" attribute to limit CSS to this component only -->
			
 
				-<style scoped lang="scss">
			
 
				-h3 {
			
 
				-  margin: 40px 0 0;
			
 
				-}
			
 
				-ul {
			
 
				-  list-style-type: none;
			
 
				-  padding: 0;
			
 
				-}
			
 
				-li {
			
 
				-  display: inline-block;
			
 
				-  margin: 0 10px;
			
 
				-}
			
 
				-a {
			
 
				-  color: #42b983;
			
 
				-}
			
 
				-</style>
			
--- a/src/components/ProjectCard.vue
+++ b/src/components/ProjectCard.vue
@@ -0,0 +1,22 @@
 
				+<template>
			
 
				+  <el-card class="project-card">
			
 
				+    <template #header>
			
 
				+      <div class="clearfix">
			
 
				+        <span>{{props.name}}</span>
			
 
				+      </div>
			
 
				+    </template>
			
 
				+    <div v-for="o in 4" :key="o" class="text item">
			
 
				+      {{'列表内容 ' + o }}
			
 
				+    </div>
			
 
				+  </el-card>
			
 
				+</template>
			
 
				+
			
 
				+<script lang="ts">
			
 
				+import { defineComponent } from 'vue';
			
 
				+
			
 
				+export default defineComponent({
			
 
				+  props: {
			
 
				+    name: String,
			
 
				+  },
			
 
				+});
			
 
				+</script>
			
--- a/src/element-plus.ts
+++ b/src/element-plus.ts
@@ -1,5 +1,8 @@
 
				 import {
			
 
				-  ElContainer, ElHeader, ElMain, ElRow,
			
 
				+  ElCard,
			
 
				+  ElCarousel,
			
 
				+  ElCarouselItem,
			
 
				+  ElContainer, ElDivider, ElHeader, ElMain, ElRow,
			
 
				 } from 'element-plus';
			
 
				 
			
 
				 export const Components = [
			
@@ -7,6 +10,10 @@ export const Components = [
 
				   ElContainer,
			
 
				   ElHeader,
			
 
				   ElMain,
			
 
				+  ElCarousel,
			
 
				+  ElCarouselItem,
			
 
				+  ElDivider,
			
 
				+  ElCard,
			
 
				 ];
			
 
				 
			
 
				 export const Plugins = [];
			
--- a/src/typings/project.d.ts
+++ b/src/typings/project.d.ts
@@ -0,0 +1,4 @@
 
				+declare interface Project {
			
 
				+  projectId: number;
			
 
				+  name: string;
			
 
				+}
			
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -39,7 +39,7 @@ _axios.interceptors.request.use(
 
				 _axios.interceptors.response.use(
			
 
				   (response) =>
			
 
				     // Do something with response data
			
 
				-    response,
			
 
				+    response.data.message,
			
 
				   (error) =>
			
 
				     // Do something with response error
			
 
				     Promise.reject(error),
			
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,15 +1,43 @@
 
				 <template>
			
 
				   <div class="home">
			
 
				-    <img alt="Vue logo" src="@/assets/logo.png">
			
 
				-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
			
 
				+    <section class="poster">
			
 
				+      <el-carousel>
			
 
				+        <el-carousel-item>
			
 
				+          <img alt="Vue logo" src="@/assets/logo.png">
			
 
				+        </el-carousel-item>
			
 
				+        <el-carousel-item>
			
 
				+          <img alt="Vue logo" src="@/assets/logo.png">
			
 
				+        </el-carousel-item>
			
 
				+        <el-carousel-item>
			
 
				+          <img alt="Vue logo" src="@/assets/logo.png">
			
 
				+        </el-carousel-item>
			
 
				+      </el-carousel>
			
 
				+    </section>
			
 
				+    <el-divider content-position="left">我的项目</el-divider>
			
 
				+    <div class="my-project">
			
 
				+      <div v-for="project in projectList" :key="project.projectId">
			
 
				+        <ProjectCard></ProjectCard>
			
 
				+      </div>
			
 
				+    </div>
			
 
				   </div>
			
 
				+  {{JSON.stringify(projectList)}}
			
 
				+  {{ready}}
			
 
				 </template>
			
 
				 
			
 
				 <script lang="ts">
			
 
				-import { defineComponent } from 'vue';
			
 
				-import HelloWorld from '@/components/HelloWorld.vue';
			
 
				+import { defineComponent, ref } from 'vue';
			
 
				+import ProjectCard from '@/components/ProjectCard.vue';
			
 
				+
			
 
				+import { ProjectAPI } from '@/api';
			
 
				 
			
 
				 export default defineComponent({
			
 
				-  components: { HelloWorld },
			
 
				+  components: { ProjectCard },
			
 
				+  setup() {
			
 
				+    const projectList = ref<Array<Project>>([]);
			
 
				+    const projectReady = ref(false);
			
 
				+
			
 
				+    // fetch project list
			
 
				+    return { projectList, projectReady };
			
 
				+  },
			
 
				 });
			
 
				 </script>