Почетна Преглед Помоћ
Регистрација Пријавите се
ZhangYi2020
/
seecoder-devcloud-frontend
изданак од HuangKaiSheng/seecoder-devcloud-frontend
1
0
Креирај огранак 0
Датотеке
Преглед изворни кода

feat: 初步建立首页框架

Jinyao пре 5 година
родитељ
cf7822966f
комит
8c4776f00c
16 измењених фајлова са 163 додато и 74 уклоњено
Подељен поглед Покажи статистику Diff
  1. 1 0
      .eslintrc.js
  2. 2 2
      mock/index.js
  3. 26 0
      mock/routers/project.js
  4. 1 1
      mock/routers/user.js
  5. 1 1
      public/index.html
  6. 21 21
      src/App.vue
  7. 3 2
      src/api/index.ts
  8. 7 0
      src/api/project.ts
  9. 4 4
      src/api/user.ts
  10. 29 0
      src/components/Header.vue
  11. 0 36
      src/components/HelloWorld.vue
  12. 22 0
      src/components/ProjectCard.vue
  13. 8 1
      src/element-plus.ts
  14. 4 0
      src/typings/project.d.ts
  15. 1 1
      src/utils/axios.ts
  16. 33 5
      src/views/Home.vue

+ 1 - 0
.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 }],
 
   },
 
 };

+ 2 - 2
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);

+ 26 - 0
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;

+ 1 - 1
mock/user.js → 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({

+ 1 - 1
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">

+ 21 - 21
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>

+ 3 - 2
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,
 
 };

+ 7 - 0
src/api/project.ts
Прегледај датотеку 

@@ -0,0 +1,7 @@
 
+import axios from '@/utils/axios';
 
+
 
+export const getProjectList = (userId: number) => axios.get('/project/all', {
 
+  params: {
 
+    userId,
 
+  },
 
+});

+ 4 - 4
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',
 
 });

+ 29 - 0
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>

+ 0 - 36
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>

+ 22 - 0
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>

+ 8 - 1
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 = [];

+ 4 - 0
src/typings/project.d.ts
Прегледај датотеку 

@@ -0,0 +1,4 @@
 
+declare interface Project {
 
+  projectId: number;
 
+  name: string;
 
+}

+ 1 - 1
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),

+ 33 - 5
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>