├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── jest.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── api
    │   └── index.js
    ├── assets
    │   ├── 401.gif
    │   ├── 404.png
    │   ├── bg.jpg
    │   ├── default.jpg
    │   ├── imgs
    │   │   ├── 1.png
    │   │   ├── 10.png
    │   │   ├── 11.png
    │   │   ├── 2.png
    │   │   ├── 3.png
    │   │   ├── 4.png
    │   │   ├── 5.png
    │   │   ├── 6.png
    │   │   ├── 7.png
    │   │   ├── 8.png
    │   │   └── 9.png
    │   ├── logo.png
    │   ├── user1.jpg
    │   ├── user2.jpg
    │   ├── user3.jpg
    │   ├── user4.jpg
    │   └── user5.jpg
    ├── components
    │   ├── Login.vue
    │   ├── NotFoundComponent.vue
    │   ├── ScrollTop.vue
    │   ├── articlehome
    │   │   ├── All.vue
    │   │   ├── Details.vue
    │   │   ├── PostArticle.vue
    │   │   ├── Top.vue
    │   │   └── allarticlehome.vue
    │   ├── backstagehome
    │   │   ├── ArticleManger.vue
    │   │   ├── BackStageHome.vue
    │   │   ├── Footer.vue
    │   │   ├── Header.vue
    │   │   ├── LoginBackStage.vue
    │   │   ├── Sidebar.vue
    │   │   ├── TypeManger.vue
    │   │   └── UserManger.vue
    │   ├── forumHome
    │   │   ├── Footer.vue
    │   │   ├── ForumHome.vue
    │   │   ├── Pageination.vue
    │   │   ├── Secend.vue
    │   │   ├── SecendTiles.vue
    │   │   ├── Tiles.vue
    │   │   └── Top.vue
    │   ├── register
    │   │   ├── FirstStep.vue
    │   │   ├── RegisterHome.vue
    │   │   ├── SecendStep.vue
    │   │   └── ThirdStep.vue
    │   └── userhome
    │   │   └── UserHome.vue
    ├── main.js
    ├── router
    │   └── index.js
    └── store
    │   ├── actions.js
    │   ├── getters.js
    │   ├── help.md
    │   ├── index.js
    │   └── mutations.js
├── tests
    └── unit
    │   └── example.spec.js
├── vue.config.js
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: ["plugin:vue/essential", "@vue/prettier"],
 7 |   rules: {
 8 |     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
 9 |     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
10 |   },
11 |   parserOptions: {
12 |     parser: "babel-eslint"
13 |   },
14 |   overrides: [
15 |     {
16 |       files: [
17 |         "**/__tests__/*.{j,t}s?(x)",
18 |         "**/tests/unit/**/*.spec.{j,t}s?(x)"
19 |       ],
20 |       env: {
21 |         jest: true
22 |       }
23 |     }
24 |   ]
25 | };
26 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 yOunGMonEy
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # forum
 2 | 
 3 | 所用到的技术栈
 4 | 
 5 | `springboot` 
 6 | 
 7 | `springsecurity`
 8 | 
 9 | `vue`
10 | 
11 | `vuex`
12 | 
13 | `axios`
14 | 
15 | `vue-router`
16 | 
17 | `element-ui`
18 | 
19 | `buefy-ui`
20 | 
21 | `mysql` 
22 | 
23 | 后端项目地址：https://github.com/cp3geek/universityforum
24 | 
25 | 后台项目跑起来再运行前端项目，不然获取不到数据，配置文件中更改数据库信息
26 | 
27 | 
28 | 帖子详情界面和发帖，登录界面使用v2ex论坛的样式
29 | 基本功能开发完了，但是有很多缺陷，先让项目跑起来再慢慢优化，希望各位大佬能给一些指导意见
30 | 
31 | 
32 | 
33 | 项目部分截图
34 |  ![image](src/assets/imgs/1.png)
35 |  ![image](src/assets/imgs/2.png)
36 |  ![image](src/assets/imgs/3.png)
37 |  ![image](src/assets/imgs/4.png)
38 |  ![image](src/assets/imgs/5.png)
39 |  ![image](src/assets/imgs/6.png)
40 |  ![image](src/assets/imgs/7.png)
41 |  ![image](src/assets/imgs/8.png)
42 |  ![image](src/assets/imgs/9.png)
43 |  ![image](src/assets/imgs/10.png)
44 |  ![image](src/assets/imgs/11.png)
45 | 
46 | ## Project setup（安装依赖）
47 | ```
48 | yarn install或者npm install
49 | ```
50 | 
51 | ### Compiles and hot-reloads for development（启动项目）
52 | ```
53 | yarn run dev 或者npm run dev
54 | ```
55 | 
56 | ### Compiles and minifies for production（打包）
57 | ```
58 | yarn run build 或者npm run build
59 | ```
60 | 
61 | 
62 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   preset: "@vue/cli-plugin-unit-jest/presets/no-babel"
3 | };
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "forum",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint",
 9 |     "test:unit": "vue-cli-service test:unit"
10 |   },
11 |   "dependencies": {
12 |     "axios": "^0.19.0",
13 |     "buefy": "^0.8.8",
14 |     "element-ui": "^2.13.0",
15 |     "font-awesome": "^4.7.0",
16 |     "moment": "^2.24.0",
17 |     "vue": "^2.6.10",
18 |     "vue-axios": "^2.1.5",
19 |     "vue-infinite-scroll": "^2.0.2",
20 |     "vue-router": "^3.1.3",
21 |     "vuex": "^3.0.1"
22 |   },
23 |   "devDependencies": {
24 |     "@vue/cli-plugin-eslint": "^4.0.0",
25 |     "@vue/cli-plugin-unit-jest": "^4.0.0",
26 |     "@vue/cli-service": "^4.0.0",
27 |     "@vue/eslint-config-prettier": "^5.0.0",
28 |     "@vue/test-utils": "1.0.0-beta.29",
29 |     "babel-eslint": "^10.0.3",
30 |     "eslint": "^5.16.0",
31 |     "eslint-plugin-prettier": "^3.1.1",
32 |     "eslint-plugin-vue": "^5.0.0",
33 |     "less": "^3.0.4",
34 |     "less-loader": "^5.0.0",
35 |     "prettier": "^1.18.2",
36 |     "vue-template-compiler": "^2.6.10"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | };
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 9 |   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
10 |   <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">
11 |   <!-- 引入样式 -->
12 |   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
13 |   <!-- 引入组件库 -->
14 |   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
15 |   <title>forum</title>
16 | </head>
17 | 
18 | <body>
19 |   <noscript>
20 |     <strong>We're sorry but forum doesn't work properly without JavaScript enabled. Please enable it to
21 |       continue.</strong>
22 |   </noscript>
23 |   <div id="app"></div>
24 |   <!-- built files will be auto injected -->
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view v-if="isRouterAlive"></router-view>
 4 |     <scroll-top />
 5 |   </div>
 6 | </template>
 7 | 
 8 | 
 9 | 
10 | <script>
11 | import ScrollTop from "@/components/ScrollTop.vue";
12 | export default {
13 |   provide(){
14 |     return{
15 |       reload:this.reload
16 |     }
17 |   },
18 |   data(){
19 |     return{
20 |       isRouterAlive:true
21 |     }
22 |   },
23 |   components: {
24 |     "scroll-top": ScrollTop
25 |   },
26 |   methods:{
27 |     reload(){
28 |       this.isRouterAlive=false;
29 |       this.$nextTick(function(){
30 |         this.isRouterAlive=true;
31 |       })
32 |     }
33 |   }
34 | };
35 | </script>
36 | 
37 | <style lang="less">
38 | #app {
39 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
40 |   -webkit-font-smoothing: antialiased;
41 |   -moz-osx-font-smoothing: grayscale;
42 |   text-align: center;
43 |   color: #2c3e50;
44 | }
45 | 
46 | #nav {
47 |   padding: 30px;
48 | 
49 |   a {
50 |     font-weight: bold;
51 |     color: #2c3e50;
52 | 
53 |     &.router-link-exact-active {
54 |       color: #42b983;
55 |     }
56 |   }
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/api/index.js:
--------------------------------------------------------------------------------
  1 | import axios from "axios";
  2 | import Qs from "qs";
  3 | import { SnackbarProgrammatic as Snackbar } from 'buefy'
  4 | 
  5 | //全局默认配置
  6 | axios.defaults.baseURL = "http://localhost:9090";
  7 | // axios.interceptors.request.use(
  8 | //     config => {
  9 | //         console.log(config);
 10 | //         return config;
 11 | //     },
 12 | //     err => {
 13 | //         console.log(err);
 14 | //     }
 15 | // );请求拦截
 16 | axios.defaults.withCredentials = true //请求发送cookie
 17 | 
 18 | 
 19 | axios.interceptors.response.use(res => {
 20 |     return res;
 21 | }, () => {
 22 |     Snackbar.open({
 23 |         message: '服务器被吃了',
 24 |         type: 'is-warning',
 25 |         position: 'is-top',
 26 |         actionText: 'Retry',
 27 |         indefinite: true,
 28 |         onAction: () => {
 29 |             this.$buefy.toast.open({
 30 |                 message: 'Action pressed',
 31 |                 queue: false
 32 |             })
 33 |         }
 34 |     })
 35 | })
 36 | 
 37 | //post传数据用data，get传参数用params
 38 | export const adminLogin = (username, password) => {
 39 |     return axios.post("/loginbackstage", Qs.stringify({ username, password }));
 40 | };
 41 | 
 42 | export const userLogin = (email, password) => {
 43 |     return axios.post(
 44 |         "http://localhost:9090/userlogin",
 45 |         Qs.stringify({ email, password })
 46 |     );
 47 | };
 48 | 
 49 | export const getAllArticle = (page) => {
 50 |     return axios.post("/pagearticle", Qs.stringify({ page }));
 51 | };
 52 | 
 53 | export const getAllArticleType = () => {
 54 |     return axios.post("/getallarticletype");
 55 | };
 56 | 
 57 | export const getArticleByTypeId = typeId => {
 58 |     return axios.post("/getarticlebytypeid", Qs.stringify({ typeId }));
 59 | };
 60 | 
 61 | export const getHotArticleType = () => {
 62 |     return axios.post("/gethotarticletype");
 63 | };
 64 | 
 65 | export const getPageMain = pageNum => {
 66 |     return axios({
 67 |         url: "/getpagearticle",
 68 |         params: {
 69 |             page: pageNum
 70 |         }
 71 |     })
 72 | };
 73 | export const getnew = () => {
 74 |     return axios("/getnew")
 75 | };
 76 | 
 77 | export const gethotuser = () => {
 78 |     return axios("/hotuser")
 79 | };
 80 | export const register = (userName, userPassword, userShow, userEmail, userPhone, userSex) => {
 81 | 
 82 |     return axios.post("/register", Qs.stringify({ userName, userPassword, userShow, userEmail, userPhone, userSex }))
 83 | 
 84 | };
 85 | export const getcomment = (artId) => {
 86 |     return axios.post("/getComment", Qs.stringify({ artId }))
 87 | };
 88 | export const newcomment = (comArtId, text, comUserId) => {
 89 |     return axios.post("/postcomment", Qs.stringify({ comArtId, text, comUserId }))
 90 | };
 91 | export const newpost = (userId, title, text, select) => {
 92 |     return axios.post("/newpost", Qs.stringify({ userId, title, text, select }))
 93 | }
 94 | 
 95 | export const findartbyuserid = (userId) => {
 96 |     return axios.post("/findartbyuserid", Qs.stringify({ userId }))
 97 | }
 98 | 
 99 | export const getuserlist = () => {
100 |     return axios.post("/getuserlist")
101 | }
102 | 
103 | 
104 | 


--------------------------------------------------------------------------------
/src/assets/401.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/401.gif


--------------------------------------------------------------------------------
/src/assets/404.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/404.png


--------------------------------------------------------------------------------
/src/assets/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/bg.jpg


--------------------------------------------------------------------------------
/src/assets/default.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/default.jpg


--------------------------------------------------------------------------------
/src/assets/imgs/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/imgs/1.png


--------------------------------------------------------------------------------
/src/assets/imgs/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/imgs/10.png


--------------------------------------------------------------------------------
/src/assets/imgs/11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/imgs/11.png


--------------------------------------------------------------------------------
/src/assets/imgs/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/imgs/2.png


--------------------------------------------------------------------------------
/src/assets/imgs/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/imgs/3.png


--------------------------------------------------------------------------------
/src/assets/imgs/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/imgs/4.png


--------------------------------------------------------------------------------
/src/assets/imgs/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/imgs/5.png


--------------------------------------------------------------------------------
/src/assets/imgs/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/imgs/6.png


--------------------------------------------------------------------------------
/src/assets/imgs/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/imgs/7.png


--------------------------------------------------------------------------------
/src/assets/imgs/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/imgs/8.png


--------------------------------------------------------------------------------
/src/assets/imgs/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/imgs/9.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/user1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/user1.jpg


--------------------------------------------------------------------------------
/src/assets/user2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/user2.jpg


--------------------------------------------------------------------------------
/src/assets/user3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/user3.jpg


--------------------------------------------------------------------------------
/src/assets/user4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/user4.jpg


--------------------------------------------------------------------------------
/src/assets/user5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cp3geek/forum/4c560348ad7941d197bd05dbcf22fffbaa2d4347/src/assets/user5.jpg


--------------------------------------------------------------------------------
/src/components/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div id="Top">
  4 |       <div class="content">
  5 |         <div style="padding-top: 6px;">
  6 |           <table cellpadding="0" cellspacing="0" border="0" width="100%">
  7 |             <tbody>
  8 |               <tr>
  9 |                 <td width="570" align="right" style="padding-top: 2px;">
 10 |                   <a href="/" class="top">首页</a>&nbsp;&nbsp;&nbsp;
 11 |                   <a href="/signup" class="top">注册</a>
 12 |                   &nbsp;&nbsp;&nbsp;
 13 |                 </td>
 14 |               </tr>
 15 |             </tbody>
 16 |           </table>
 17 |         </div>
 18 |       </div>
 19 |     </div>
 20 |     <div id="Wrapper">
 21 |       <div class="content">
 22 |         <div id="Leftbar"></div>
 23 | 
 24 |         <div id="Main">
 25 |           <div class="sep20"></div>
 26 |           <div class="box">
 27 |             <div class="header">
 28 |               <a href="/">重工论坛</a>
 29 |               <span class="chevron">&nbsp;›&nbsp;</span> 登录 &nbsp;
 30 |               <li class="fa fa-lock"></li>
 31 |             </div>
 32 |             <div class="cell">
 33 |               <form method="post" action="/signin">
 34 |                 <table cellpadding="5" cellspacing="0" border="0" width="100%">
 35 |                   <tbody>
 36 |                     <tr>
 37 |                       <td width="120" align="right">电子邮箱</td>
 38 |                       <td width="auto" align="left">
 39 |                         <input
 40 |                           type="text"
 41 |                           class="sl"
 42 |                           name="47898fbf4d5420a894dbd060f6763916611cd25baefcabca3234cea3fd5a5703"
 43 |                           value
 44 |                           autofocus="autofocus"
 45 |                           autocorrect="off"
 46 |                           spellcheck="false"
 47 |                           autocapitalize="off"
 48 |                           placeholder="电子邮箱地址"
 49 |                           v-model="email"
 50 |                         />
 51 |                       </td>
 52 |                     </tr>
 53 |                     <tr>
 54 |                       <td width="120" align="right">密码</td>
 55 |                       <td width="auto" align="left">
 56 |                         <input
 57 |                           type="password"
 58 |                           class="sl"
 59 |                           name="cb10b4e849cb70f260623e3843c990f983a01cbb5f5899afd878f367e58ed4cb"
 60 |                           value
 61 |                           autocorrect="off"
 62 |                           spellcheck="false"
 63 |                           autocapitalize="off"
 64 |                           v-model="password"
 65 |                         />
 66 |                       </td>
 67 |                     </tr>
 68 | 
 69 |                     <tr>
 70 |                       <td width="120" align="right"></td>
 71 |                       <td width="auto" align="left">
 72 |                         <input type="hidden" value="62970" name="once" />
 73 |                         <input type="button" class="super normal button" value="登录" @click="login" />
 74 |                       </td>
 75 |                     </tr>
 76 |                     <tr>
 77 |                       <td width="120" align="right"></td>
 78 |                       <td width="auto" align="left">
 79 |                         <a href="/forgot">我忘记密码了</a>
 80 |                       </td>
 81 |                     </tr>
 82 |                   </tbody>
 83 |                 </table>
 84 |                 <input type="hidden" value="/" name="next" />
 85 |               </form>
 86 |             </div>
 87 |           </div>
 88 |         </div>
 89 |       </div>
 90 |       <div class="c"></div>
 91 |       <div class="sep20"></div>
 92 |     </div>
 93 |     <div id="Bottom">
 94 |       <div class="content">
 95 |         <div class="inner">
 96 |           <div class="sep10"></div>
 97 |           <div class="fr">
 98 |             <a href="https://www.digitalocean.com/?refcode=1b51f1a7651d" target="_blank">
 99 |               <div id="DigitalOcean"></div>
100 |             </a>
101 |           </div>
102 |           <strong>
103 |             <a href="/about" class="dark" target="_self">关于</a> &nbsp;
104 |             <span class="snow">·</span> &nbsp;
105 |             <a href="/faq" class="dark" target="_self">FAQ</a> &nbsp;
106 |             <span class="snow">·</span> &nbsp;
107 |             <a href="/p/7v9TEc53" class="dark" target="_self">API</a> &nbsp;
108 |             <span class="snow">·</span> &nbsp;
109 |             <a href="/mission" class="dark" target="_self">我们的愿景</a> &nbsp;
110 |             <span class="snow">·</span> &nbsp;
111 |             <a href="/advertise" class="dark" target="_self">广告投放</a> &nbsp;
112 |             <span class="snow">·</span> &nbsp;
113 |             <a href="/advertise/2017.html" class="dark" target="_self">感谢</a> &nbsp;
114 |             <span class="snow">·</span> &nbsp;
115 |             <a href="/tools" class="dark" target="_self">实用小工具</a>
116 |             &nbsp;
117 |           </strong>
118 |           &nbsp;
119 |           <span class="snow">·</span>
120 |           &nbsp;
121 |           <div class="sep20"></div>创意工作者们的社区
122 |           <div class="sep5"></div>World is powered by solitude
123 |           <div class="sep20"></div>
124 |           <span class="small fade">
125 |             VERSION: 3.9.8.3 · 4ms · UTC 01:44 · PVG 09:44 · LAX 17:44 · JFK 20:44
126 |             <br />♥ Do have faith in what you're doing.
127 |           </span>
128 |           <div class="sep10"></div>
129 |         </div>
130 |       </div>
131 |     </div>
132 |   </div>
133 | </template>
134 | 
135 | 
136 | 
137 | 
138 | <script>
139 | import { userLogin } from "@/api";
140 | export default {
141 |   data() {
142 |     return {
143 |       password: "",
144 |       email: ""
145 |     };
146 |   },
147 |   methods: {
148 |     login() {
149 |       userLogin(this.email, this.password)
150 |         .then(res => {
151 |           const { data } = res;
152 |           this.user = data;
153 |           console.log(data);
154 |           if (data != null) {
155 |             this.$store.dispatch("aLogin", {
156 |               user: data,
157 |               message: "",
158 |               success: () => {
159 |                 console.log("欢迎您");
160 |               }
161 |             });
162 |           } else {
163 |             alert("该用户不存在");
164 |           }
165 |           this.$router.go(-1);
166 |         })
167 |         .catch(() => {});
168 |     }
169 |   }
170 | };
171 | </script>
172 | 
173 | 
174 | <style scoped>
175 | .table {
176 |   display: table;
177 |   border-collapse: separate;
178 |   border-color: grey;
179 | }
180 | 
181 | .tbody {
182 |   display: table-row-group;
183 |   vertical-align: middle;
184 |   border-color: inherit;
185 | }
186 | .tr {
187 |   display: table-row;
188 |   vertical-align: inherit;
189 |   border-color: inherit;
190 | }
191 | .box {
192 |   background-color: #fff;
193 |   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
194 |   border-bottom: 1px solid #e2e2e2;
195 | }
196 | .header {
197 |   padding: 10px;
198 |   font-size: 15px;
199 |   line-height: 120%;
200 |   text-align: left;
201 |   border-bottom: 1px solid #e2e2e2;
202 |   overflow: auto;
203 | }
204 | .cell {
205 |   padding: 10px;
206 |   font-size: 14px;
207 |   line-height: 120%;
208 |   text-align: left;
209 |   border-bottom: 1px solid #e2e2e2;
210 | }
211 | .Leftbar {
212 |   width: 0;
213 |   float: left;
214 | }
215 | .Rightbar {
216 |   width: 270px;
217 |   float: right;
218 |   margin-right: 20px;
219 | }
220 | .Main {
221 |   width: auto;
222 |   margin: 0 310px 0 20px;
223 | }
224 | a.dark:active,
225 | a.dark:link,
226 | a.dark:visited {
227 |   color: gray;
228 |   text-decoration: none;
229 | }
230 | a:active,
231 | a:link,
232 | a:visited {
233 |   color: #778087;
234 |   text-decoration: none;
235 |   word-break: break-word;
236 | }
237 | .fr {
238 |   float: right;
239 |   text-align: right;
240 | }
241 | .sep10 {
242 |   height: 10px;
243 | }
244 | .inner {
245 |   padding: 10px;
246 |   font-size: 14px;
247 |   line-height: 150%;
248 |   text-align: left;
249 | }
250 | div {
251 |   display: block;
252 | }
253 | :root {
254 |   --box-background-color: #fff;
255 |   --box-background-alt-color: #f9f9f9;
256 |   --box-background-hover-color: #fafafa;
257 |   --box-foreground-color: #000;
258 |   --box-border-color: #e2e2e2;
259 |   --box-border-radius: 3px;
260 | }
261 | #Top {
262 |   text-align: center;
263 |   background-color: var(--box-background-color);
264 |   height: 44px;
265 |   font-size: 15px;
266 |   font-weight: 500;
267 |   background-size: 44px 44px;
268 |   border-bottom: 1px solid rgba(0, 0, 0, 0.22);
269 |   padding: 0 20px;
270 | }
271 | #Wrapper {
272 |   text-align: center;
273 |   background-color: #e2e2e2;
274 |   background-image: url(/static/img/shadow_light.png);
275 |   background-repeat: repeat-x;
276 | }
277 | #Bottom {
278 |   border-top: 1px solid rgba(0, 0, 0, 0.22);
279 |   background-color: var(--box-background-color);
280 |   text-align: center;
281 |   color: #999;
282 |   padding: 0 10px;
283 | }
284 | body {
285 |   padding: 0;
286 |   margin: 0;
287 |   font-family: helvetica neue, luxi sans, dejavu sans, segoe ui,
288 |     hiragino sans gb, microsoft yahei, sans-serif;
289 | }
290 | .sep20 {
291 |   height: 20px;
292 | }
293 | .content {
294 |   min-width: 600px;
295 |   max-width: 1100px;
296 |   margin: 0 auto;
297 | }
298 | </style>


--------------------------------------------------------------------------------
/src/components/NotFoundComponent.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <img src="../assets/404.png" />
4 |   </div>
5 | </template>


--------------------------------------------------------------------------------
/src/components/ScrollTop.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- <img
  3 |       class="back_to_top"
  4 |       v-show="showTop"
  5 |       src="../assets/5.jpg"
  6 |       @click="scrollToY(0, 1500, 'easeInOutQuint')"
  7 |   />-->
  8 |   <div class="back_to_top" v-show="showTop" @click="scrollToY(0, 1500, 'easeInOutQuint')">
  9 |     <i class="far fa-arrow-alt-circle-up"></i>
 10 |   </div>
 11 | </template>
 12 | 
 13 | <script>
 14 | window.requestAnimFrame = (function() {
 15 |   return (
 16 |     window.requestAnimationFrame ||
 17 |     window.webkitRequestAnimationFrame ||
 18 |     window.mozRequestAnimationFrame ||
 19 |     function(callback) {
 20 |       window.setTimeout(callback, 1000 / 60);
 21 |     }
 22 |   );
 23 | })();
 24 | 
 25 | export default {
 26 |   name: "BackToTop",
 27 |   data() {
 28 |     return {
 29 |       scrollTop: 0
 30 |     };
 31 |   },
 32 |   methods: {
 33 |     scrollToY(scrollTargetY, speed, easing) {
 34 |       // scrollTargetY: the target scrollY property of the window
 35 |       // speed: time in pixels per second
 36 |       // easing: easing equation to use
 37 | 
 38 |       let scrollY = window.scrollY || document.documentElement.scrollTop;
 39 |       scrollTargetY = scrollTargetY || 0;
 40 |       speed = speed || 2000;
 41 |       easing = easing || "easeOutSine";
 42 |       let currentTime = 0;
 43 |       // min time .1, max time .8 seconds
 44 |       let time = Math.max(
 45 |         0.1,
 46 |         Math.min(Math.abs(scrollY - scrollTargetY) / speed, 0.8)
 47 |       );
 48 | 
 49 |       // easing equations from https://github.com/danro/easing-js/blob/master/easing.js
 50 |       let easingEquations = {
 51 |         easeOutSine: function(pos) {
 52 |           return Math.sin(pos * (Math.PI / 2));
 53 |         },
 54 |         easeInOutSine: function(pos) {
 55 |           return -0.5 * (Math.cos(Math.PI * pos) - 1);
 56 |         },
 57 |         easeInOutQuint: function(pos) {
 58 |           if ((pos /= 0.5) < 1) {
 59 |             return 0.5 * Math.pow(pos, 5);
 60 |           }
 61 |           return 0.5 * (Math.pow(pos - 2, 5) + 2);
 62 |         }
 63 |       };
 64 | 
 65 |       // add animation loop
 66 |       function tick() {
 67 |         currentTime += 1 / 60;
 68 | 
 69 |         let p = currentTime / time;
 70 |         let t = easingEquations[easing](p);
 71 | 
 72 |         if (p < 1) {
 73 |           window.requestAnimFrame(tick);
 74 |           window.scrollTo(0, scrollY + (scrollTargetY - scrollY) * t);
 75 |         } else {
 76 |           window.scrollTo(0, scrollTargetY);
 77 |         }
 78 |       }
 79 | 
 80 |       // call it once to get started
 81 |       tick();
 82 |     },
 83 |     getScrollTop() {
 84 |       this.scrollTop =
 85 |         window.pageYOffset ||
 86 |         document.documentElement.scrollTop ||
 87 |         document.body.scrollTop;
 88 |     }
 89 |   },
 90 |   computed: {
 91 |     showTop: function() {
 92 |       return this.scrollTop > 50;
 93 |     }
 94 |   },
 95 |   mounted() {
 96 |     window.addEventListener("scroll", this.getScrollTop);
 97 |   }
 98 | };
 99 | </script>
100 | 
101 | <style lang="less" scoped>
102 | .back_to_top {
103 |   position: fixed;
104 |   z-index: 999;
105 |   bottom: 1.8rem;
106 |   right: 0.26rem;
107 |   width: 25px;
108 |   height: 30px;
109 |   overflow: hidden;
110 | }
111 | </style>
112 | 
113 | 


--------------------------------------------------------------------------------
/src/components/articlehome/All.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="tile is-ancestor">
  3 |     <div class="tile is-parent is-8">
  4 |       <article class="tile is-child box">
  5 |         <p align="right">
  6 |           <button class="button is-info" @click="getAll">全部帖子</button>
  7 |         </p>
  8 | 
  9 |         <ul
 10 |           v-infinite-scroll="loadMore"
 11 |           infinite-scroll-disabled="busy"
 12 |           infinite-scroll-distance="limit"
 13 |           style="height: 100vh;
 14 |     overflow-y: auto;"
 15 |         >
 16 |           <div class="box" v-for="(content,index) in contents" :key="index">
 17 |             <article class="media">
 18 |               <figure class="media-left">
 19 |                 <p class="image is-64x64">
 20 |                   <img :src="require(`../../assets/${content.user.userImg}`)" class="size" />
 21 |                 </p>
 22 |               </figure>
 23 |               <div class="media-content">
 24 |                 <div class="content">
 25 |                   <p>
 26 |                     <strong>发帖人用户名:{{content.user.userName}}</strong>
 27 | 
 28 |                     <br />
 29 |                     发帖标题:{{content.article.artTitle}}
 30 |                   </p>
 31 |                 </div>
 32 |                 <nav class="level is-mobile">
 33 |                   <div class="level-left">
 34 |                     <a class="level-item">
 35 |                       <span class="icon is-small">
 36 |                         <i class="fab fa-hotjar"></i>
 37 |                       </span>
 38 |                       {{content.article.artHotNum}}
 39 |                     </a>
 40 | 
 41 |                     <a class="level-item">
 42 |                       <span class="icon is-small">
 43 |                         <i class="fas fa-comment-dots"></i>
 44 |                       </span>
 45 |                       {{content.article.artComNum}}
 46 |                     </a>
 47 | 
 48 |                     <a class="level-item">
 49 |                       <span class="icon is-small">
 50 |                         <i class="fas fa-heart"></i>
 51 |                       </span>
 52 |                       {{content.article.artLikeNum}}
 53 |                     </a>
 54 |                   </div>
 55 |                 </nav>
 56 |               </div>
 57 |               <div class="media-right">
 58 |                 <a class="navbar-item" slot="trigger" role="button">
 59 |                   <b-button type="is-info" outlined @click="detail(index)">查看详情</b-button>
 60 |                 </a>
 61 |               </div>
 62 |             </article>
 63 |           </div>
 64 |           <div v-if="flag===1">没有更多了</div>
 65 | 
 66 |           <b-notification :closable="false" v-if="flag===2">
 67 |             <div style="text-align:center">正在加载</div>
 68 |             <b-loading :is-full-page="isFullPage" :active.sync="isLoading" :can-cancel="true"></b-loading>
 69 |           </b-notification>
 70 |         </ul>
 71 |       </article>
 72 |     </div>
 73 |     <div class="tile is-parent">
 74 |       <article class="tile is-child box">
 75 |         <p class="subtitle">所有板块</p>
 76 | 
 77 |         <div class="card">
 78 |           <header class="card-header">
 79 |             <p class="card-header-title">板块名</p>
 80 |             <a href="#" class="card-header-icon" aria-label="more options">
 81 |               <span class="icon">
 82 |                 <i class="fas fa-angle-down" aria-hidden="true"></i>
 83 |               </span>
 84 |             </a>
 85 |           </header>
 86 |           <div class="card-content">
 87 |             <div class="content">
 88 |               <section>
 89 |                 <b-tooltip
 90 |                   v-for="(ArticleType,index) in ArticleTypes"
 91 |                   :key="index"
 92 |                   :label="ArticleType.typeDesc"
 93 |                   class="is-info"
 94 |                 >
 95 |                   <button
 96 |                     class="button is-info is-outlined"
 97 |                     @click="getTypeArticle(ArticleType.typeId)"
 98 |                   >{{ArticleType.typeName}}</button>
 99 |                 </b-tooltip>
100 |               </section>
101 |               <br />
102 |             </div>
103 |           </div>
104 |           <footer class="card-footer">
105 |             <a href="#" class="card-footer-item">点击你感兴趣的板块</a>
106 |           </footer>
107 |         </div>
108 |       </article>
109 |     </div>
110 |   </div>
111 | </template>
112 | 
113 | 
114 | <script>
115 | import { getAllArticle } from "@/api";
116 | import { getAllArticleType } from "@/api";
117 | import { getArticleByTypeId } from "@/api";
118 | export default {
119 |   data() {
120 |     return {
121 |       isLoading: false,
122 |       isFullPage: false,
123 |       btnFlag: false,
124 |       busy: false,
125 |       limit: 20,
126 |       flag: 0,
127 | 
128 |       // test: [],
129 |       contents: [
130 |         {
131 |           article: {
132 |             artId: 0,
133 |             artComNum: "",
134 |             artCommentId: 0,
135 |             artContent: "",
136 |             artCreTime: "",
137 |             artHotNum: 0,
138 |             artLikeNum: 0,
139 |             artTitle: "",
140 |             artTypeId: 0,
141 |             artUserId: 0,
142 |             artView: 0
143 |           },
144 |           user: {
145 |             userId: 0,
146 |             userPassword: 0,
147 |             userName: "",
148 |             userEmail: "",
149 |             userSex: "",
150 |             userPhone: "",
151 |             userStatus: 0,
152 |             userTime: "",
153 |             userShow: "",
154 |             userBlog: "",
155 |             userImg: "404.png",
156 |             userFans: "",
157 |             userConcern: ""
158 |           }
159 |         }
160 |       ],
161 |       test: [],
162 |       ArticleTypes: [
163 |         {
164 |           typeId: 0,
165 |           typeCreateTime: "",
166 |           typeName: "",
167 |           typeDesc: ""
168 |         }
169 |       ],
170 |       number: 1,
171 |       totalPages: 3
172 |     };
173 |   },
174 |   mounted() {
175 |     getAllArticle()
176 |       .then(res => {
177 |         this.contents = res.data.content;
178 |       })
179 |       .catch(() => {});
180 |     getAllArticleType()
181 |       .then(res => {
182 |         const { data } = res;
183 |         this.ArticleTypes = data;
184 |       })
185 |       .catch(() => {});
186 |   },
187 | 
188 |   methods: {
189 |     loadMore() {
190 |       console.log("scrolling");
191 | 
192 |       this.busy = true;
193 |       if (this.number - 1 === this.totalPages) {
194 |         this.flag = 1;
195 |       } else {
196 |         this.flag = 2;
197 |         this.isLoading = true;
198 | 
199 |         setTimeout(() => {
200 |           getAllArticle(this.number++)
201 |             .then(res => {
202 |               const append = res.data.content;
203 |               this.contents = this.contents.concat(append);
204 | 
205 |               this.busy = false;
206 |             })
207 |             .catch(() => {
208 |               this.busy = false;
209 |             });
210 |         }, 1000);
211 |       }
212 |     },
213 |     getTypeArticle(typeId) {
214 |       getArticleByTypeId(typeId)
215 |         .then(res => {
216 |           const { data } = res;
217 |           this.contents = data;
218 |         })
219 |         .catch(() => {});
220 |     },
221 |     getAll() {
222 |       getAllArticle()
223 |         .then(res => {
224 |           this.contents = res.data.content;
225 |         })
226 |         .catch(() => {});
227 |     },
228 |     detail(index) {
229 |       const detaildata = this.contents[index];
230 |       this.$router.push({
231 |         path: "/details",
232 |         query: {
233 |           detaildata: JSON.stringify(detaildata)
234 |         }
235 |       });
236 |     }
237 |   },
238 |   created() {
239 |     // this.loadMore();
240 |   }
241 | };
242 | </script>
243 | 
244 | <style scoped>
245 | .size {
246 |   width: 64px;
247 |   height: 64px;
248 | }
249 | .fuck {
250 |   text-align: center;
251 | }
252 | .tile.is-ancestor {
253 |   margin-left: 0;
254 |   margin-right: 0;
255 |   margin-top: 0;
256 | }
257 | </style>


--------------------------------------------------------------------------------
/src/components/articlehome/Details.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <b-navbar>
  4 |       <template slot="brand">
  5 |         <b-navbar-item tag="router-link" :to="{ path: '/' }">
  6 |           <img
  7 |             src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
  8 |             alt="Lightweight UI components for Vue.js based on Bulma"
  9 |           />
 10 |         </b-navbar-item>
 11 |       </template>
 12 |       <template slot="start">
 13 |         <b-navbar-item href="#" @click="home">首页</b-navbar-item>
 14 |       </template>
 15 |     </b-navbar>
 16 |     <div class="Wrapper">
 17 |       <div class="content">
 18 |         <div class="Leftbar"></div>
 19 | 
 20 |         <div class="Rightbar" v-if="$store.state.isLogin">
 21 |           <div class="sep20"></div>
 22 |           <div class="box">
 23 |             <div class="cell">
 24 |               <table cellpadding="0" cellspacing="0" border="0" width="100%">
 25 |                 <tbody>
 26 |                   <tr>
 27 |                     <td width="48" valign="top">
 28 |                       <a href="#">
 29 |                         <img
 30 |                           :src="require(`@/assets/${$store.state.user.userImg}`)"
 31 |                           class="avatar"
 32 |                           border="0"
 33 |                           align="default"
 34 |                           style="max-width: 48px; max-height: 48px;"
 35 |                         />
 36 |                       </a>
 37 |                     </td>
 38 |                     <td width="10" valign="top"></td>
 39 |                     <td width="auto" align="left">
 40 |                       <span class="bigger">
 41 |                         <a href="#">{{$store.state.user.userName}}</a>
 42 |                       </span>
 43 |                     </td>
 44 |                   </tr>
 45 |                 </tbody>
 46 |               </table>
 47 |               <div class="sep10"></div>
 48 |               <table cellpadding="0" cellspacing="0" border="0" width="100%">
 49 |                 <tbody>
 50 |                   <tr>
 51 |                     <td width="33%" align="center">
 52 |                       <a href="#" class="dark" style="display: block;">
 53 |                         <span class="bigger">{{$store.state.user.userFans}}</span>
 54 |                         <div class="sep3"></div>
 55 |                         <span class="fade">粉丝数</span>
 56 |                       </a>
 57 |                     </td>
 58 |                     <td
 59 |                       width="34%"
 60 |                       style="border-left: 1px solid rgba(100, 100, 100, 0.4); border-right: 1px solid rgba(100, 100, 100, 0.4);"
 61 |                       align="center"
 62 |                     >
 63 |                       <a href="#" class="dark" style="display: block;">
 64 |                         <span class="bigger">{{myartnum}}</span>
 65 |                         <div class="sep3"></div>
 66 |                         <span class="fade">你的帖子</span>
 67 |                       </a>
 68 |                     </td>
 69 |                     <td width="33%" align="center">
 70 |                       <a href="/my/following" class="dark" style="display: block;">
 71 |                         <span class="bigger">{{$store.state.user.userConcern}}</span>
 72 |                         <div class="sep3"></div>
 73 |                         <span class="fade">你关注的人数</span>
 74 |                       </a>
 75 |                     </td>
 76 |                   </tr>
 77 |                 </tbody>
 78 |               </table>
 79 |             </div>
 80 |             <div class="cell" id="member-activity">
 81 |               <div class="member-activity-bar">
 82 |                 <div class="member-activity-start" style="width: 15px;"></div>
 83 |               </div>
 84 |             </div>
 85 |             <div class="cell" style="padding: 5px;">
 86 |               <table cellpadding="0" cellspacing="0" border="0" width="100%">
 87 |                 <tbody>
 88 |                   <tr>
 89 |                     <td width="28">
 90 |                       <a href="/new">
 91 |                         <img src width="28" border="0" />
 92 |                       </a>
 93 |                     </td>
 94 |                     <td width="10"></td>
 95 |                     <td width="auto" valign="middle" align="left">
 96 |                       <!-- <a @click="newcomment">在此贴发表评论</a> -->
 97 |                     </td>
 98 |                   </tr>
 99 |                 </tbody>
100 |               </table>
101 |             </div>
102 |             <div class="inner">
103 |               <div class="fr" id="money" style="margin: -3px 0px 0px 0px"></div>
104 |               <a class="fade" @click="Post">去发帖</a>
105 |             </div>
106 |           </div>
107 |         </div>
108 |         <div id="Rightbar" v-else>
109 |           <div class="sep20"></div>
110 |           <div class="box">
111 |             <div class="cell">
112 |               <strong>Say what u want 2 say</strong>
113 |               <div class="sep5"></div>
114 |               <span class="fade">这是一个关于分享和探索的地方</span>
115 |             </div>
116 |             <div class="inner">
117 |               <div class="sep5"></div>
118 |               <div align="center">
119 |                 <a href="/registerhome" class="super normal button">现在注册</a>
120 |                 <div class="sep5"></div>
121 |                 <div class="sep10"></div>已注册用户请 &nbsp;
122 |                 <a href="/login">登录</a>
123 |               </div>
124 |             </div>
125 |           </div>
126 |           <div class="sep20"></div>
127 |         </div>
128 |         <div class="Main">
129 |           <div class="sep20"></div>
130 |           <div class="box" style="border-bottom:0px;">
131 |             <div class="header">
132 |               <div class="fr">
133 |                 <img :src="require(`../../assets/${info.user.userImg}`)" class="size" />
134 |               </div>
135 |               <div class="sep10"></div>
136 |               <h1>{{info.article.artTitle}}</h1>
137 |               <small class="gray">{{info.user.userName}}</small>
138 |             </div>
139 |             <div class="cell">{{info.article.artContent}}</div>
140 |           </div>
141 |           <div class="sep20"></div>
142 |           <div class="box">
143 |             <div class="cell">回复</div>
144 |             <div class="fuck"></div>
145 |             <div class="cell" v-for="(c, index) in comments" :key="index">
146 |               <table cellpadding="0" cellspacing="0" border="0" width="100%">
147 |                 <tbody>
148 |                   <tr>
149 |                     <td width="48" valign="top" align="center">
150 |                       <img :src="require(`@/assets/${c.user.userImg}`)" />
151 |                     </td>
152 |                     <td width="10" valign="top"></td>
153 |                     <td width="auto" valign="top" align="left">
154 |                       <div class="fr">
155 |                         &nbsp; &nbsp;
156 |                         <span class="no"></span>
157 |                       </div>
158 |                       <div class="sep3"></div>
159 |                       <strong>
160 |                         <a href="#" class="dark">{{c.user.userName}}</a>
161 |                       </strong>&nbsp; &nbsp;
162 |                       <span class="ago">{{c.comment.comTime}}</span>
163 |                       <div class="sep5"></div>
164 |                       <div class="reply_content">{{c.comment.comContent}}</div>
165 |                     </td>
166 |                   </tr>
167 |                 </tbody>
168 |               </table>
169 |             </div>
170 |           </div>
171 |           <div class="sep20"></div>
172 |           <div class="box" v-show="$store.state.isLogin">
173 |             <div class="cell">
174 |               <div class="fr">
175 |                 <a>
176 |                   <strong>↑</strong> 注意用语规范
177 |                 </a>
178 |               </div>添加一条新回复
179 |             </div>
180 |             <div class="cell">
181 |               <form>
182 |                 <textarea
183 |                   v-model="text"
184 |                   name="content"
185 |                   maxlength="10000"
186 |                   class="mll"
187 |                   id="reply_content"
188 |                   style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 112px;"
189 |                 ></textarea>
190 |                 <div class="sep10"></div>
191 |                 <div class="fr">
192 |                   <div class="sep5"></div>
193 |                   <span class="gray">请尽量让自己的回复能够对别人有帮助</span>
194 |                 </div>
195 |                 <input type="hidden" value="41475" name="once" />
196 |                 <input type="button" value="回复" class="super normal button" @click="newcomment" />
197 |               </form>
198 |             </div>
199 |             <div class="inner">
200 |               <div class="fr">
201 |                 <a href="#">← CP3</a>
202 |               </div>&nbsp;
203 |             </div>
204 |           </div>
205 |         </div>
206 |       </div>
207 |     </div>
208 |     <div id="Bottom">
209 |       <div class="content">
210 |         <div class="inner">
211 |           <div class="sep10"></div>
212 |           <div class="fr"></div>
213 |           <strong>
214 |             <a href="/about" class="dark" target="_self">关于</a> &nbsp;
215 |             <span class="snow">·</span> &nbsp;
216 |             <a href="/faq" class="dark" target="_self">FAQ</a> &nbsp;
217 |             <span class="snow">·</span> &nbsp;
218 |             <a href="/p/7v9TEc53" class="dark" target="_self">API</a> &nbsp;
219 |             <span class="snow">·</span> &nbsp;
220 |             <a href="/mission" class="dark" target="_self">我们的愿景</a> &nbsp;
221 |             <span class="snow">·</span> &nbsp;
222 |             <a href="/advertise" class="dark" target="_self">广告投放</a> &nbsp;
223 |             <span class="snow">·</span> &nbsp;
224 |             <a href="/advertise/2017.html" class="dark" target="_self">感谢</a> &nbsp;
225 |             <span class="snow">·</span> &nbsp;
226 |             <a href="/tools" class="dark" target="_self">实用小工具</a>
227 |           </strong>
228 |           <div class="sep20"></div>创意工作者们的社区
229 |         </div>
230 |       </div>
231 |     </div>
232 |   </div>
233 | </template>
234 | 
235 | <script>
236 | import { newcomment } from "@/api";
237 | import { getcomment } from "@/api";
238 | import { findartbyuserid } from "@/api";
239 | export default {
240 |   inject: ["reload"],
241 |   data() {
242 |     return {
243 |       myartnum: 0,
244 |       text: "",
245 |       info: [
246 |         {
247 |           article: {
248 |             artId: 0,
249 |             artUserId: 1,
250 |             artTitle: "",
251 |             artTypeId: 0,
252 |             artContent: "",
253 |             artCommentId: 0,
254 |             artCreTime: "",
255 |             artView: "",
256 |             artComNum: 0,
257 |             artHotNum: 0,
258 |             artLikeNum: 0
259 |           },
260 |           user: {
261 |             userId: 0,
262 |             userPassword: 0,
263 |             userName: "",
264 |             userEmail: "",
265 |             userSex: "",
266 |             userPhone: "",
267 |             userStatus: 0,
268 |             userTime: "",
269 |             userShow: "",
270 |             userBlog: "",
271 |             userImg: "",
272 |             userFans: 0,
273 |             userConcern: 0
274 |           }
275 |         }
276 |       ],
277 |       comments: [
278 |         {
279 |           comment: {
280 |             comId: 0,
281 |             comArtId: 0,
282 |             comContent: "",
283 |             comTime: "",
284 |             comUserId: ""
285 |           },
286 | 
287 |           user: {
288 |             userId: 0,
289 |             userPassword: 0,
290 |             userName: "",
291 |             userEmail: "",
292 |             userSex: "",
293 |             userPhone: "",
294 |             userStatus: 0,
295 |             userTime: "",
296 |             userShow: "",
297 |             userBlog: "",
298 |             userImg: "",
299 |             userFans: 0,
300 |             userConcern: 0
301 |           }
302 |         }
303 |       ]
304 |     };
305 |   },
306 |   created() {
307 |     this.info = JSON.parse(this.$route.query.detaildata);
308 | 
309 |     getcomment(this.info.article.artId)
310 |       .then(res => {
311 |         this.comments = res.data.content;
312 | 
313 |         for (let i = 0; i < this.comments.length; i++) {
314 |           this.comments[i].comment.comTime = this.$moment(
315 |             this.comments[i].comment.comTime,
316 |             "YYYY-MM-DD hh:mm:ss"
317 |           ).fromNow();
318 |         }
319 |       })
320 |       .catch({});
321 | 
322 |     findartbyuserid(this.$store.state.user.userId).then(res => {
323 |       console.log(res);
324 |       this.myartnum = res.data.length;
325 |     });
326 |   },
327 |   methods: {
328 |     home() {
329 |       this.$router.push("/");
330 |     },
331 |     Post() {
332 |       this.$router.push("/postarticle");
333 |     },
334 |     newcomment() {
335 |       console.log(this.text);
336 |       newcomment(
337 |         this.info.article.artId,
338 |         this.text,
339 |         this.$store.state.user.userId
340 |       )
341 |         .then(res => {
342 |           if (res.data === 200) {
343 |             this.text = "";
344 |             alert("评论成功");
345 |             this.reload();
346 |           }
347 |         })
348 |         .catch({});
349 |     }
350 |   }
351 | 
352 |   //通过query传参，将参数拼接在地址栏中
353 | };
354 | </script>
355 | 
356 | <style scoped>
357 | textarea {
358 |   -webkit-writing-mode: horizontal-tb !important;
359 |   text-rendering: auto;
360 |   color: -internal-light-dark-color(black, white);
361 |   letter-spacing: normal;
362 |   word-spacing: normal;
363 |   text-transform: none;
364 |   text-indent: 0px;
365 |   text-shadow: none;
366 |   display: inline-block;
367 |   text-align: start;
368 |   -webkit-appearance: textarea;
369 |   background-color: -internal-light-dark-color(white, black);
370 |   -webkit-rtl-ordering: logical;
371 |   flex-direction: column;
372 |   resize: auto;
373 |   cursor: text;
374 |   white-space: pre-wrap;
375 |   overflow-wrap: break-word;
376 |   margin: 0em;
377 |   font: 400 13.3333px Arial;
378 |   border-width: 1px;
379 |   border-style: solid;
380 |   border-color: rgb(169, 169, 169);
381 |   border-image: initial;
382 |   padding: 2px;
383 |   width: 720px;
384 | }
385 | form {
386 |   display: block;
387 |   margin-top: 0em;
388 | }
389 | #Rightbar {
390 |   width: 270px;
391 |   float: right;
392 |   margin-right: 20px;
393 | }
394 | .bigger {
395 |   text-align: center;
396 |   font-size: 20px;
397 | }
398 | .sep20 {
399 |   height: 20px;
400 | }
401 | .Wrapper {
402 |   background-color: #e2e2e2;
403 |   background-repeat: repeat-x, repeat-x;
404 |   text-align: center;
405 | }
406 | .content {
407 |   min-width: 600px;
408 |   max-width: 1100px;
409 |   margin: 0 auto;
410 | }
411 | .Leftbar {
412 |   width: 0;
413 |   float: left;
414 | }
415 | .Rightbar {
416 |   width: 270px;
417 |   float: right;
418 |   margin-right: 20px;
419 | }
420 | .Main {
421 |   width: auto;
422 |   margin: 0 310px 0 20px;
423 | }
424 | .div {
425 |   display: block;
426 | }
427 | .box {
428 |   background-color: #fff;
429 |   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
430 |   border-bottom: 1px solid #e2e2e2;
431 | }
432 | .header {
433 |   padding: 10px;
434 |   font-size: 15px;
435 |   line-height: 120%;
436 |   text-align: left;
437 |   border-bottom: 1px solid #e2e2e2;
438 |   overflow: auto;
439 | }
440 | .cell {
441 |   padding: 10px;
442 |   font-size: 14px;
443 |   line-height: 120%;
444 |   text-align: left;
445 |   border-bottom: 1px solid #e2e2e2;
446 | }
447 | .table {
448 |   display: table;
449 |   border-collapse: separate;
450 |   border-color: grey;
451 | }
452 | 
453 | .tbody {
454 |   display: table-row-group;
455 |   vertical-align: middle;
456 |   border-color: inherit;
457 | }
458 | .tr {
459 |   display: table-row;
460 |   vertical-align: inherit;
461 |   border-color: inherit;
462 | }
463 | .fuck {
464 |   border-bottom: 1px solid #e2e2e2;
465 | }
466 | .fr {
467 |   float: right;
468 |   text-align: right;
469 | }
470 | .sep10 {
471 |   height: 10px;
472 | }
473 | .h1 {
474 |   font-size: 24px;
475 |   font-weight: 500;
476 |   line-height: 150%;
477 |   margin: 0 0 10px;
478 |   padding: 0;
479 | }
480 | .gray {
481 |   color: #999;
482 | }
483 | .small {
484 |   font-size: smaller;
485 | }
486 | #Bottom {
487 |   border-top: 1px solid rgba(0, 0, 0, 0.22);
488 |   background-color: var(--box-background-color);
489 |   text-align: center;
490 |   color: #999;
491 |   padding: 0 10px;
492 | }
493 | :root {
494 |   --box-background-color: #fff;
495 |   --box-background-alt-color: #f9f9f9;
496 |   --box-background-hover-color: #fafafa;
497 |   --box-foreground-color: #000;
498 |   --box-border-color: #e2e2e2;
499 |   --box-border-radius: 3px;
500 | }
501 | .inner {
502 |   padding: 10px;
503 |   font-size: 14px;
504 |   line-height: 150%;
505 |   text-align: left;
506 | }
507 | strong {
508 |   font-weight: bold;
509 | }
510 | a.dark:active,
511 | a.dark:link,
512 | a.dark:visited {
513 |   color: gray;
514 |   text-decoration: none;
515 | }
516 | a:active,
517 | a:link,
518 | a:visited {
519 |   color: #778087;
520 |   text-decoration: none;
521 |   word-break: break-word;
522 | }
523 | a {
524 |   color: #000;
525 | }
526 | </style>


--------------------------------------------------------------------------------
/src/components/articlehome/PostArticle.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div id="Top">
  4 |       <div class="content">
  5 |         <div style="padding-top: 6px;">
  6 |           <table cellpadding="0" cellspacing="0" border="0" width="100%">
  7 |             <tbody>
  8 |               <tr>
  9 |                 <td width="110" align="left">
 10 |                   <a href="/" name="top" title="way to explore">
 11 |                     <div id="Logo"></div>
 12 |                   </a>
 13 |                 </td>
 14 |                 <td width="auto" align="left"></td>
 15 |                 <td width="570" align="right" style="padding-top: 2px;">
 16 |                   <a href="/" class="top">首页</a>
 17 |                   &nbsp;&nbsp;&nbsp;
 18 |                 </td>
 19 |               </tr>
 20 |             </tbody>
 21 |           </table>
 22 |         </div>
 23 |       </div>
 24 |     </div>
 25 |     <div id="Wrapper">
 26 |       <div class="content">
 27 |         <div id="Leftbar"></div>
 28 |         <div id="Rightbar">
 29 |           <div class="sep20"></div>
 30 |           <div class="box">
 31 |             <div class="cell">发帖提示</div>
 32 |             <div class="inner">
 33 |               <ul style="margin-top: 0px;">
 34 |                 <li>
 35 |                   <span class="f13">主题标题</span>
 36 |                   <div class="sep10"></div>请在标题中描述内容要点。
 37 |                   <div class="sep10"></div>
 38 |                 </li>
 39 |                 <li>
 40 |                   <div class="fr" style="margin-top: -5px; margin-right: 5px;"></div>
 41 |                   <span class="f13">正文</span>
 42 |                   <div class="sep10"></div>可以在正文中为你要发布的主题添加更多细节。
 43 |                   <div class="sep10"></div>
 44 |                 </li>
 45 |                 <li>
 46 |                   <span class="f13">选择板块</span>
 47 |                   <div class="sep10"></div>在最后，请为你的主题选择一个板块。恰当的归类会让你发布的信息更加有用。
 48 |                   <div class="sep10"></div>
 49 |                 </li>
 50 |               </ul>
 51 |             </div>
 52 |           </div>
 53 |           <div class="sep20"></div>
 54 |           <div class="box">
 55 |             <div class="cell">论坛原则</div>
 56 |             <div class="inner">
 57 |               <ul style="margin-top: 0px;">
 58 |                 <li>
 59 |                   <span class="f13">尊重原创</span>
 60 |                   <div class="sep10"></div>请不要在该论坛发布任何盗版下载链接，包括软件、音乐、电影等等。
 61 |                   <div class="sep10"></div>
 62 |                 </li>
 63 |                 <li>
 64 |                   <span class="f13">友好互助</span>
 65 |                   <div class="sep10"></div>保持对陌生人的友善。用知识去帮助别人。
 66 |                 </li>
 67 |               </ul>
 68 |             </div>
 69 |           </div>
 70 |         </div>
 71 |         <div id="Main">
 72 |           <div class="sep20"></div>
 73 |           <div class="box" id="box">
 74 |             <div class="cell">
 75 |               <a href="/">{{$store.state.user.userName}}</a>
 76 |               <span class="chevron">&nbsp;›&nbsp;</span> 发表新帖
 77 |             </div>
 78 |             <form method="post" action="/new" id="compose">
 79 |               <div class="cell">
 80 |                 <div class="fr fade" id="title_remaining">120</div>帖子标题
 81 |               </div>
 82 |               <div class="cell" style="padding: 0px;">
 83 |                 <textarea
 84 |                   v-model="title"
 85 |                   class="msl"
 86 |                   rows="1"
 87 |                   maxlength="120"
 88 |                   id="topic_title"
 89 |                   name="title"
 90 |                   autofocus="autofocus"
 91 |                   placeholder="请输入帖子标题，如果标题能够表达完整内容，则正文可以为空"
 92 |                 ></textarea>
 93 |               </div>
 94 |               <div class="cell">
 95 |                 <div class="fr fade" id="content_remaining">20000</div>正文
 96 |               </div>
 97 | 
 98 |               <form action>
 99 |                 <textarea name="post" cols="100" rows="10" v-model="text"></textarea>
100 |               </form>
101 | 
102 |               <div class="cell">
103 |                 <select
104 |                   name="node_name"
105 |                   id="nodes"
106 |                   style="width: 300px; font-size: 14px;"
107 |                   data-select2-id="nodes"
108 |                   tabindex="-1"
109 |                   class="select2-hidden-accessible"
110 |                   aria-hidden="true"
111 |                   v-model="select"
112 |                 >
113 |                   <option value="1" data-select2-id="1069">篮球</option>
114 |                   <option value="2" data-select2-id="1070">足球</option>
115 |                   <option value="3" data-select2-id="1069">步行街</option>
116 |                   <option value="4" data-select2-id="1069">跳蚤市场</option>
117 |                   <option value="5" data-select2-id="1069">健身区</option>
118 |                   <option value="6" data-select2-id="1069">学习专区</option>
119 |                 </select>
120 |                 <span
121 |                   class="select2 select2-container select2-container--default"
122 |                   dir="ltr"
123 |                   data-select2-id="1"
124 |                   style="width: 300px;"
125 |                 >
126 |                   <span class="selection">
127 |                     <span
128 |                       class="select2-selection select2-selection--single"
129 |                       role="combobox"
130 |                       aria-haspopup="true"
131 |                       aria-expanded="false"
132 |                       tabindex="0"
133 |                       aria-disabled="false"
134 |                       aria-labelledby="select2-nodes-container"
135 |                     >
136 |                       <span
137 |                         class="select2-selection__rendered"
138 |                         id="select2-nodes-container"
139 |                         role="textbox"
140 |                         aria-readonly="true"
141 |                       >
142 |                         <span class="select2-selection__placeholder">请选择一个板块</span>
143 |                       </span>
144 |                       <span class="select2-selection__arrow" role="presentation">
145 |                         <b role="presentation"></b>
146 |                       </span>
147 |                     </span>
148 |                   </span>
149 |                   <span class="dropdown-wrapper" aria-hidden="true"></span>
150 |                 </span>
151 |               </div>
152 | 
153 |               <input type="hidden" name="content" value id="topic_content" />
154 |               <input type="hidden" name="once" value="97891" />
155 |             </form>
156 |             <div class="cell">
157 |               <div class="fr">
158 |                 <span id="error_message"></span> &nbsp;
159 |                 <button type="button" class="super normal button" @click="post">
160 |                   <li class="fa fa-paper-plane"></li>&nbsp;发布
161 |                 </button>
162 |               </div>
163 |               <button class="super normal button" onclick="previewTopic();">
164 |                 <li class="fa fa-eye"></li>&nbsp;
165 |               </button>
166 |             </div>
167 |           </div>
168 |         </div>
169 |       </div>
170 |       <div class="c"></div>
171 |       <div class="sep20"></div>
172 |     </div>
173 |     <div id="Bottom">
174 |       <div class="content">
175 |         <div class="inner">
176 |           <div class="sep10"></div>
177 |           <div class="fr">
178 |             <a href="https://www.digitalocean.com/?refcode=1b51f1a7651d" target="_blank">
179 |               <div id="DigitalOcean"></div>
180 |             </a>
181 |           </div>
182 |           <strong>
183 |             <a href="/about" class="dark" target="_self">关于</a> &nbsp;
184 |             <span class="snow">·</span> &nbsp;
185 |             <a href="/faq" class="dark" target="_self">FAQ</a> &nbsp;
186 |             <span class="snow">·</span> &nbsp;
187 |             <a href="/p/7v9TEc53" class="dark" target="_self">API</a> &nbsp;
188 |             <span class="snow">·</span> &nbsp;
189 |             <a href="/mission" class="dark" target="_self">我们的愿景</a>
190 |             &nbsp;
191 |             <span class="snow">·</span> &nbsp;
192 |             <a href="/advertise/2019.html" class="dark" target="_self">感谢</a>
193 |             &nbsp;
194 |           </strong>
195 |           &nbsp;
196 |           <div class="sep20"></div>创意工作者们的社区
197 |           <div class="sep5"></div>World is powered by solitude
198 |           <div class="sep20"></div>
199 |           <span class="small fade">
200 |             <br />♥ Do have faith in what you're doing.
201 |           </span>
202 |           <div class="sep10"></div>
203 |         </div>
204 |       </div>
205 |     </div>
206 |   </div>
207 | </template>
208 | 
209 | 
210 | 
211 | <script>
212 | import { newpost } from "@/api";
213 | export default {
214 |   data() {
215 |     return {
216 |       select: "",
217 |       title: "",
218 |       text: "",
219 |       userId: ""
220 |     };
221 |   },
222 |   methods: {
223 |     post() {
224 |       this.userId = this.$store.state.user.userId;
225 |       newpost(this.userId, this.title, this.text, this.select)
226 |         .then(res => {
227 |           if (res.data === 200) {
228 |             this.$router.push("/");
229 |           }
230 |         })
231 |         .catch();
232 |     }
233 |   }
234 | };
235 | </script>
236 | 
237 | <style scoped>
238 | .fade {
239 |   color: #ccc;
240 | }
241 | 
242 | .msl {
243 |   width: 100%;
244 |   border: none;
245 |   resize: none;
246 |   background-color: #f9f9f9;
247 |   outline: 0;
248 |   font-size: 14px;
249 |   line-height: 20px;
250 |   padding: 10px;
251 |   font-family: helvetica neue, hiragino sans gb, microsoft yahei, sans-serif;
252 |   margin: 0;
253 |   box-sizing: border-box;
254 | }
255 | 
256 | textarea {
257 |   -webkit-writing-mode: horizontal-tb !important;
258 |   text-rendering: auto;
259 |   color: -internal-light-dark-color(black, white);
260 |   letter-spacing: normal;
261 |   word-spacing: normal;
262 |   text-transform: none;
263 |   text-indent: 0px;
264 |   text-shadow: none;
265 |   display: inline-block;
266 |   text-align: start;
267 |   -webkit-appearance: textarea;
268 |   background-color: -internal-light-dark-color(white, black);
269 |   -webkit-rtl-ordering: logical;
270 |   flex-direction: column;
271 |   resize: auto;
272 |   cursor: text;
273 |   white-space: pre-wrap;
274 |   overflow-wrap: break-word;
275 |   margin: 0em;
276 |   font: 400 13.3333px Arial;
277 |   border-width: 1px;
278 |   border-style: solid;
279 |   border-color: rgb(169, 169, 169);
280 |   border-image: initial;
281 |   padding: 2px;
282 | }
283 | 
284 | style Attribute {
285 |   text-align: left;
286 |   border-bottom: 1px solid #e2e2e2;
287 |   font-size: 14px;
288 |   line-height: 120%;
289 | }
290 | 
291 | #Bottom {
292 |   border-top: 1px solid rgba(0, 0, 0, 0.22);
293 |   background-color: var(--box-background-color);
294 |   text-align: center;
295 |   color: #999;
296 |   padding: 0 10px;
297 | }
298 | div {
299 |   display: block;
300 | }
301 | body {
302 |   padding: 0px;
303 |   margin: 0px;
304 |   font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Segoe UI",
305 |     "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
306 | }
307 | :root {
308 |   --box-background-color: #fff;
309 |   --box-background-alt-color: #f9f9f9;
310 |   --box-background-hover-color: #fafafa;
311 |   --box-foreground-color: #000;
312 |   --box-border-color: #e2e2e2;
313 |   --box-border-radius: 3px;
314 | }
315 | #Top {
316 |   text-align: center;
317 |   background-color: var(--box-background-color);
318 |   height: 44px;
319 |   font-size: 15px;
320 |   font-weight: 500;
321 |   background-size: 44px 44px;
322 |   border-bottom: 1px solid rgba(0, 0, 0, 0.22);
323 |   padding: 0 20px;
324 | }
325 | #Wrapper {
326 |   text-align: center;
327 |   background-color: #e2e2e2;
328 |   background-image: url(/static/img/shadow_light.png);
329 |   background-repeat: repeat-x;
330 | }
331 | #Top > .content {
332 |   max-width: 1060px;
333 | }
334 | .content {
335 |   min-width: 600px;
336 |   max-width: 1100px;
337 |   margin: 0 auto;
338 | }
339 | table[Attributes Style] {
340 |   -webkit-border-horizontal-spacing: 0px;
341 |   -webkit-border-vertical-spacing: 0px;
342 |   border-top-width: 0px;
343 |   border-right-width: 0px;
344 |   border-bottom-width: 0px;
345 |   border-left-width: 0px;
346 |   width: 100%;
347 | }
348 | user agent stylesheet table {
349 |   display: table;
350 |   border-collapse: separate;
351 |   border-spacing: 2px;
352 |   border-color: grey;
353 | }
354 | tbody {
355 |   display: table-row-group;
356 |   vertical-align: middle;
357 |   border-color: inherit;
358 | }
359 | tr {
360 |   display: table-row;
361 |   vertical-align: inherit;
362 |   border-color: inherit;
363 | }
364 | td[Attributes Style] {
365 |   width: 110px;
366 |   text-align: -webkit-left;
367 | }
368 | user agent stylesheet td {
369 |   display: table-cell;
370 |   vertical-align: inherit;
371 | }
372 | .c {
373 |   clear: both;
374 | }
375 | .sep20 {
376 |   height: 20px;
377 | }
378 | #Leftbar {
379 |   width: 0;
380 |   float: left;
381 | }
382 | #Rightbar {
383 |   width: 270px;
384 |   float: right;
385 |   margin-right: 20px;
386 | }
387 | .fr {
388 |   float: right;
389 |   text-align: right;
390 | }
391 | #Main {
392 |   width: auto;
393 |   margin: 0 310px 0 20px;
394 | }
395 | .box {
396 |   background-color: #fff;
397 |   border-radius: 3px;
398 |   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
399 |   border-bottom: 1px solid #e2e2e2;
400 | }
401 | .cell {
402 |   padding: 10px;
403 |   font-size: 14px;
404 |   line-height: 120%;
405 |   text-align: left;
406 |   border-bottom: 1px solid #e2e2e2;
407 | }
408 | .inner {
409 |   padding: 10px;
410 |   font-size: 14px;
411 |   line-height: 150%;
412 |   text-align: left;
413 | }
414 | ul {
415 |   margin: 15px 0 15px 20px;
416 |   padding: 0;
417 | }
418 | user agent stylesheet ul {
419 |   display: block;
420 |   list-style-type: disc;
421 |   margin-block-start: 1em;
422 |   margin-block-end: 1em;
423 |   margin-inline-start: 0px;
424 |   margin-inline-end: 0px;
425 |   padding-inline-start: 40px;
426 | }
427 | ol li,
428 | ul li {
429 |   padding: 0;
430 |   margin: 0;
431 | }
432 | user agent stylesheet li {
433 |   display: list-item;
434 |   text-align: -webkit-match-parent;
435 | }
436 | .f13 {
437 |   font-size: 13px;
438 | }
439 | .sep10 {
440 |   height: 10px;
441 | }
442 | form {
443 |   display: block;
444 |   margin-top: 0em;
445 | }
446 | element.style {
447 |   text-align: left;
448 |   border-bottom: 1px solid #e2e2e2;
449 |   font-size: 14px;
450 |   line-height: 120%;
451 | }
452 | input[type="hidden" i] {
453 |   display: none;
454 |   -webkit-appearance: initial;
455 |   background-color: initial;
456 |   cursor: default;
457 |   padding: initial;
458 |   border: initial;
459 | }
460 | #editor {
461 |   position: relative;
462 |   width: auto;
463 |   height: 600px;
464 |   font-size: 16px;
465 |   line-height: 130%;
466 | }
467 | user agent stylesheet input {
468 |   -webkit-writing-mode: horizontal-tb !important;
469 |   text-rendering: auto;
470 |   color: -internal-light-dark-color(black, white);
471 |   letter-spacing: normal;
472 |   word-spacing: normal;
473 |   text-transform: none;
474 |   text-indent: 0px;
475 |   text-shadow: none;
476 |   display: inline-block;
477 |   text-align: start;
478 |   -webkit-appearance: textfield;
479 |   background-color: -internal-light-dark-color(white, black);
480 |   -webkit-rtl-ordering: logical;
481 |   cursor: text;
482 |   margin: 0em;
483 |   font: 400 13.3333px Arial;
484 |   padding: 1px 0px;
485 |   border-width: 2px;
486 |   border-style: inset;
487 |   border-color: initial;
488 |   border-image: initial;
489 | }
490 | </style>


--------------------------------------------------------------------------------
/src/components/articlehome/Top.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="navbar" role="navigation" aria-label="main navigation">
 3 |     <div class="navbar-brand">
 4 |       <a class="navbar-item" href="https://bulma.io">
 5 |         <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
 6 |       </a>
 7 | 
 8 |       <a
 9 |         role="button"
10 |         class="navbar-burger burger"
11 |         aria-label="menu"
12 |         aria-expanded="false"
13 |         data-target="navbarBasicExample"
14 |       >
15 |         <span aria-hidden="true"></span>
16 |         <span aria-hidden="true"></span>
17 |         <span aria-hidden="true"></span>
18 |       </a>
19 |     </div>
20 | 
21 |     <div id="navbarBasicExample" class="navbar-menu">
22 |       <div class="navbar-start">
23 |         <a class="navbar-item">
24 |           <router-link to="/">首页</router-link>
25 |         </a>
26 | 
27 |         <a class="navbar-item">Documentation</a>
28 | 
29 |         <div class="navbar-item has-dropdown is-hoverable">
30 |           <a class="navbar-link">More</a>
31 | 
32 |           <div class="navbar-dropdown">
33 |             <a class="navbar-item">About</a>
34 |             <a class="navbar-item">Jobs</a>
35 |             <a class="navbar-item">Contact</a>
36 |             <hr class="navbar-divider" />
37 |             <a class="navbar-item">Report an issue</a>
38 |           </div>
39 |         </div>
40 |       </div>
41 | 
42 |       <div class="navbar-end">
43 |         <div class="navbar-item">
44 |           <div class="buttons">
45 |             <a class="button is-primary">
46 |               <strong>Sign up</strong>
47 |             </a>
48 |             <a class="button is-light">Log in</a>
49 |           </div>
50 |         </div>
51 |       </div>
52 |     </div>
53 |   </nav>
54 | </template>


--------------------------------------------------------------------------------
/src/components/articlehome/allarticlehome.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Top />
 4 |     <All />
 5 |     <!-- <Test /> -->
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import { SnackbarProgrammatic as Snackbar } from "buefy";
11 | import Top from "../articlehome/Top";
12 | import All from "../articlehome/All";
13 | // import Test from "../articlehome/Test";
14 | export default {
15 |   mounted() {
16 |     Snackbar.open("享受生活！！！！");
17 |   },
18 | 
19 |   components: {
20 |     Top,
21 |     All
22 |     // Test
23 |   }
24 | };
25 | </script>
26 | 
27 | 
28 | <style scoped>
29 | </style>


--------------------------------------------------------------------------------
/src/components/backstagehome/ArticleManger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-table ref="filterTable" :data="tableData" style="width: 100%">
 3 |     <el-table-column prop="date" label="发帖日期" sortable width="180" column-key="date"></el-table-column>
 4 |     <el-table-column prop="name" label="发帖人" width="180"></el-table-column>
 5 |     <el-table-column prop="address" label="发帖标题" :formatter="formatter"></el-table-column>
 6 |     <el-table-column prop="tag" label="所属板块" width="100">
 7 |       <template slot-scope="scope">
 8 |         <el-tag
 9 |           :type="scope.row.tag === '家' ? 'primary' : 'success'"
10 |           disable-transitions
11 |         >{{scope.row.tag}}</el-tag>
12 |       </template>
13 |     </el-table-column>
14 |   </el-table>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   data() {
20 |     return {
21 |       tableData: [
22 |         {
23 |           date: "2019-06-05 20:40:48",
24 |           name: "cp3",
25 |           address: "雷霆连续两场完成20分逆转什么水平",
26 |           tag: "篮球"
27 |         },
28 |         {
29 |           date: "2019-12-09 14:32:58",
30 |           name: "cp3",
31 |           address: "低价出二手笔记本，需要得进",
32 |           tag: "跳蚤市场"
33 |         },
34 |         {
35 |           date: "2019-12-13 09:19:26",
36 |           name: "cy",
37 |           address: "2021考研该如何准备，有学姐学长能指导吗",
38 |           tag: "学习专区"
39 |         },
40 |         {
41 |           date: "2019-12-09 14:00:00",
42 |           name: "young",
43 |           address: "足球发展史",
44 |           tag: "足球"
45 |         }
46 |       ]
47 |     };
48 |   },
49 |   methods: {
50 |     formatter(row, column) {
51 |       console.log(column);
52 |       return row.address;
53 |     }
54 |   }
55 | };
56 | </script>


--------------------------------------------------------------------------------
/src/components/backstagehome/BackStageHome.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-container>
 3 |     <el-header>
 4 |       <Header />
 5 |     </el-header>
 6 |     <el-container>
 7 |       <el-aside width="200px">
 8 |         <Sidebar />
 9 |       </el-aside>
10 |       <el-container>
11 |         <el-main>
12 |           <router-view></router-view>
13 |         </el-main>
14 |         <el-footer>
15 |           <Footer />
16 |         </el-footer>
17 |       </el-container>
18 |     </el-container>
19 |   </el-container>
20 | </template>
21 | 
22 | 
23 | 
24 | <script>
25 | import Header from "../backstagehome/Header.vue";
26 | import Sidebar from "../backstagehome/Sidebar.vue";
27 | 
28 | import Footer from "../backstagehome/Footer.vue";
29 | 
30 | export default {
31 |   data() {
32 |     return {
33 |       isActive: true
34 |     };
35 |   },
36 |   components: {
37 |     Header,
38 |     Sidebar,
39 | 
40 |     Footer
41 |   }
42 | };
43 | </script>
44 | 
45 | 
46 | <style scoped>
47 | .el-header,
48 | .el-footer {
49 |   background-color: #b3c0d1;
50 |   color: #333;
51 |   text-align: center;
52 |   line-height: 60px;
53 | }
54 | 
55 | .el-aside {
56 |   background-color: #d3dce6;
57 |   color: #333;
58 |   text-align: center;
59 |   line-height: 200px;
60 | }
61 | 
62 | .el-main {
63 |   background-color: #e9eef3;
64 |   color: #333;
65 |   text-align: center;
66 |   line-height: 160px;
67 | }
68 | 
69 | body > .el-container {
70 |   margin-bottom: 40px;
71 | }
72 | 
73 | .el-container:nth-child(5) .el-aside,
74 | .el-container:nth-child(6) .el-aside {
75 |   line-height: 260px;
76 | }
77 | 
78 | .el-container:nth-child(7) .el-aside {
79 |   line-height: 320px;
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/src/components/backstagehome/Footer.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>友情链接</div>
3 | </template>


--------------------------------------------------------------------------------
/src/components/backstagehome/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-menu
 3 |     :default-active="activeIndex2"
 4 |     class="el-menu-demo"
 5 |     mode="horizontal"
 6 |     @select="handleSelect"
 7 |     background-color="#545c64"
 8 |     text-color="#fff"
 9 |     active-text-color="#ffd04b"
10 |   >
11 |     <el-menu-item index="1">首页</el-menu-item>
12 |     <el-submenu index="2">
13 |       <template slot="title">我的工作台</template>
14 |       <el-menu-item index="2-1">选项1</el-menu-item>
15 |       <el-menu-item index="2-2">选项2</el-menu-item>
16 |       <el-menu-item index="2-3">选项3</el-menu-item>
17 |     </el-submenu>
18 |     <el-menu-item index="3" disabled>消息中心</el-menu-item>
19 |     <el-menu-item index="4">
20 |       <a href="http://localhost:8080" target="_blank">论坛首页</a>
21 |     </el-menu-item>
22 |   </el-menu>
23 | </template>
24 | 
25 | <style>
26 | .el-menu-vertical-demo:not(.el-menu--collapse) {
27 |   width: 200px;
28 |   min-height: 400px;
29 | }
30 | </style>
31 | 
32 | <script>
33 | export default {
34 |   data() {
35 |     return {
36 |       isCollapse: true
37 |     };
38 |   },
39 |   methods: {
40 |     handleOpen(key, keyPath) {
41 |       console.log(key, keyPath);
42 |     },
43 |     handleClose(key, keyPath) {
44 |       console.log(key, keyPath);
45 |     }
46 |   }
47 | };
48 | </script>


--------------------------------------------------------------------------------
/src/components/backstagehome/LoginBackStage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="fuck">
 3 |     <b-field label="Username">
 4 |       <b-input
 5 |         v-model="username"
 6 |         placeholder="username"
 7 |         required
 8 |         pattern="[A-Za-z][A-Za-z0-9_]{4,14}"
 9 |         validation-message="用户名错误!"
10 |       />
11 |     </b-field>
12 | 
13 |     <b-field label="Password">
14 |       <b-input v-model="password" type="password" placeholder="password" password-reveal></b-input>
15 |     </b-field>
16 |     <b-button :loading="loading" class="shit" type="is-info" @click="clickMe">Click Me</b-button>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import { adminLogin } from "@/api";
22 | 
23 | export default {
24 |   data() {
25 |     return {
26 |       username: "",
27 |       password: "",
28 |       loading: false
29 |     };
30 |   },
31 |   methods: {
32 |     clickMe() {
33 |       this.loading = true;
34 |       adminLogin(this.username, this.password)
35 |         .then(res => {
36 |           const { data } = res;
37 |           console.log(res);
38 |           if (data) {
39 |             this.$router.push("/backstagehome");
40 |           } else {
41 |             alert("你不是管理员");
42 |           }
43 |         })
44 |         .catch(() => {})
45 |         .finally(() => (this.loading = false));
46 |     }
47 |   }
48 | };
49 | </script>
50 | 
51 | <style scoped>
52 | .fuck {
53 |   width: 400px;
54 |   height: 300px;
55 |   margin: 0 auto;
56 | }
57 | 
58 | .shit {
59 |   width: 100%;
60 | }
61 | </style>


--------------------------------------------------------------------------------
/src/components/backstagehome/Sidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-menu
 3 |     default-active="2"
 4 |     class="el-menu-vertical-demo"
 5 |     @open="handleOpen"
 6 |     @close="handleClose"
 7 |     @select="handleSelect"
 8 |   >
 9 |     <el-menu-item index="1">
10 |       <template slot="title">
11 |         <i class="el-icon-s-custom"></i>
12 |         <span>用户管理</span>
13 |       </template>
14 |     </el-menu-item>
15 | 
16 |     <el-menu-item index="2">
17 |       <i class="el-icon-document"></i>
18 |       <span slot="title">帖子管理</span>
19 |     </el-menu-item>
20 | 
21 |     <el-menu-item index="3">
22 |       <i class="el-icon-folder-add"></i>
23 |       <span slot="title">板块管理</span>
24 |     </el-menu-item>
25 |   </el-menu>
26 | </template>
27 | 
28 | 
29 | <style>
30 | .el-menu-vertical-demo:not(.el-menu--collapse) {
31 |   width: 200px;
32 |   min-height: 400px;
33 | }
34 | </style>
35 | 
36 | <script>
37 | export default {
38 |   data() {
39 |     return {
40 |       isCollapse: true
41 |     };
42 |   },
43 |   methods: {
44 |     handleOpen(key, keyPath) {
45 |       console.log(key, keyPath);
46 |     },
47 |     handleClose(key, keyPath) {
48 |       console.log(key, keyPath);
49 |     },
50 |     handleSelect(key, keyPath) {
51 |       console.log(keyPath);
52 |       switch (key) {
53 |         case "1":
54 |           this.$router.push("/usermanger");
55 |           break;
56 |         case "2":
57 |           this.$router.push("/articlemanger");
58 |           break;
59 |         case "3":
60 |           this.$router.push("/typemanger");
61 |           break;
62 |       }
63 |     }
64 |   }
65 | };
66 | </script>


--------------------------------------------------------------------------------
/src/components/backstagehome/TypeManger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-table :data="tableData" style="width: 100%">
 3 |     <el-table-column label="板块创建日期" width="180">
 4 |       <template slot-scope="scope">
 5 |         <i class="el-icon-time"></i>
 6 |         <span style="margin-left: 10px">{{ scope.row.date }}</span>
 7 |       </template>
 8 |     </el-table-column>
 9 |     <el-table-column label="板块" width="180">
10 |       <template slot-scope="scope">
11 |         <el-popover trigger="hover" placement="top">
12 |           <p>板块简介: {{ scope.row.address }}</p>
13 |           <div slot="reference" class="name-wrapper">
14 |             <el-tag size="medium">{{ scope.row.name }}</el-tag>
15 |           </div>
16 |         </el-popover>
17 |       </template>
18 |     </el-table-column>
19 |     <el-table-column label="操作">
20 |       <template slot-scope="scope">
21 |         <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
22 |         <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
23 |       </template>
24 |     </el-table-column>
25 |   </el-table>
26 | </template>
27 | 
28 | <script>
29 | export default {
30 |   data() {
31 |     return {
32 |       tableData: [
33 |         {
34 |           date: "2019-12-10 17:05:56",
35 |           name: "篮球",
36 |           address: "篮球专区，分享篮球"
37 |         },
38 |         {
39 |           date: "2019-12-10 17:06:51",
40 |           name: "足球",
41 |           address: "可谈论足球比赛"
42 |         },
43 |         {
44 |           date: "2019-12-10 17:07:12",
45 |           name: "步行街",
46 |           address: "分享生活趣事"
47 |         },
48 |         {
49 |           date: "2019-12-10 17:07:23",
50 |           name: "跳蚤市场",
51 |           address: "校园二手商品交易市场"
52 |         },
53 |         {
54 |           date: "2019-12-10 17:07:50",
55 |           name: "健身区",
56 |           address: "健身大佬聚集地"
57 |         },
58 |         {
59 |           date: "2019-12-10 17:09:52",
60 |           name: "学习区",
61 |           address: "分享学习资料"
62 |         }
63 |       ]
64 |     };
65 |   },
66 |   methods: {
67 |     handleEdit(index, row) {
68 |       console.log(index, row);
69 |     },
70 |     handleDelete(index, row) {
71 |       console.log(index, row);
72 |     }
73 |   }
74 | };
75 | </script>


--------------------------------------------------------------------------------
/src/components/backstagehome/UserManger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="tile is-ancestor">
 3 |     <div class="tile is-parent" v-for="(item,i) in user" :key="i">
 4 |       <article class="tile is-child box">
 5 |         <p class="subtitle" style="height:50px;width:300px">用户名：{{item.userName}}</p>
 6 |         <p class="subtitle">邮箱：{{item.userEmail}}</p>
 7 |         <p class="subtitle">
 8 |           头像：
 9 |           <img :src="require(`@/assets/${item.userImg}`)" class="size" />
10 |         </p>
11 |         <p class="subtitle">电话：{{item.userPhone}}</p>
12 |       </article>
13 |     </div>
14 |   </div>
15 | </template>
16 | 
17 | 
18 | <script>
19 | import { getuserlist } from "@/api";
20 | export default {
21 |   data() {
22 |     return {
23 |       user: [
24 |         {
25 |           userId: 0,
26 |           userPassword: 0,
27 |           userName: "",
28 |           userEmail: "",
29 |           userSex: "",
30 |           userPhone: "",
31 |           userStatus: 0,
32 |           userTime: "",
33 |           userShow: "",
34 |           userBlog: "",
35 |           userImg: "",
36 |           userFans: 0,
37 |           userConcern: 0
38 |         }
39 |       ]
40 |     };
41 |   },
42 |   created() {
43 |     getuserlist()
44 |       .then(res => {
45 |         const { data } = res;
46 |         this.user = data;
47 |       })
48 |       .catch();
49 |   }
50 | };
51 | </script>
52 | 
53 | <style scoped>
54 | .size {
55 |   width: 64px;
56 |   height: 64px;
57 | }
58 | </style>


--------------------------------------------------------------------------------
/src/components/forumHome/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="footer">
 3 |     <div class="content has-text-centered">
 4 |       <p>
 5 |         <strong>此项目</strong> by
 6 |         <a href="https://github.com/Chp3">Chp3</a>. The source code is licensed
 7 |         <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
 8 |         is licensed
 9 |         <a
10 |           href="https://github.com/Chp3/forum"
11 |         >CC BY NC SA 4.0</a>.
12 |       </p>
13 |     </div>
14 |   </footer>
15 | </template>
16 | 
17 | 
18 | <script>
19 | export default {
20 |   data() {
21 |     return {};
22 |   },
23 |   created() {}
24 | };
25 | </script>
26 | 
27 | 


--------------------------------------------------------------------------------
/src/components/forumHome/ForumHome.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="forumhome">
 3 |     <Top />
 4 |     <Secend />
 5 |     <Tiles />
 6 |     <SecendTiles />
 7 | 
 8 |     <Footer />
 9 |     
10 |   </div>
11 | </template>
12 | 
13 | 
14 | <script>
15 | import Top from "../forumHome/Top";
16 | import Secend from "../forumHome/Secend";
17 | import Tiles from "../forumHome/Tiles";
18 | import Footer from "../forumHome/Footer";
19 | import SecendTiles from "../forumHome/SecendTiles";
20 | 
21 | 
22 | export default {
23 |   components: {
24 |     Top,
25 |     Secend,
26 |     Tiles,
27 |     Footer,
28 |     SecendTiles,
29 |     
30 |   }
31 | };
32 | </script>
33 | 
34 | 


--------------------------------------------------------------------------------
/src/components/forumHome/Pageination.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <hr />
 4 |     <b-pagination
 5 |       :total="total"
 6 |       :current.sync="current"
 7 |       :range-before="rangeBefore"
 8 |       :range-after="rangeAfter"
 9 |       :order="order"
10 |       :size="size"
11 |       :simple="isSimple"
12 |       :rounded="isRounded"
13 |       :per-page="perPage"
14 |       :icon-prev="prevIcon"
15 |       :icon-next="nextIcon"
16 |       @change="change"
17 |       aria-next-label="Next page"
18 |       aria-previous-label="Previous page"
19 |       aria-page-label="Page"
20 |       aria-current-label="Current page"
21 |     ></b-pagination>
22 |   </section>
23 | </template>
24 | 
25 | <script>
26 | export default {
27 |   data() {
28 |     return {
29 |       total: 25,
30 |       current: 1,
31 |       perPage: 2,
32 |       rangeBefore: 3,
33 |       rangeAfter: 1,
34 |       order: "",
35 |       size: "",
36 |       isSimple: false,
37 |       isRounded: false,
38 |       prevIcon: "chevron-left",
39 |       nextIcon: "chevron-right"
40 |     };
41 |   },
42 |   mounted() {
43 |     this.total = this.$store.state.totalElements;
44 |   },
45 |   methods: {
46 |     change(number) {
47 |       this.$store.dispatch("changepage", number);
48 |     }
49 |   }
50 | };
51 | </script>


--------------------------------------------------------------------------------
/src/components/forumHome/Secend.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="hero is-white">
 3 |     <div class="hero-body">
 4 |       <div class="container">
 5 |         <h1 class="title">重工论坛</h1>
 6 |         <h2 class="subtitle is-italic">
 7 |           <nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
 8 |             <ul>
 9 |               <li>
10 |                 <a href="#">尽责</a>
11 |               </li>
12 |               <li>
13 |                 <a href="#">守信</a>
14 |               </li>
15 |               <li>
16 |                 <a href="#">求精</a>
17 |               </li>
18 |               <li>
19 |                 <a href="#" aria-current="page">创新</a>
20 |               </li>
21 |             </ul>
22 |           </nav>
23 |         </h2>
24 |       </div>
25 |     </div>
26 |     <progress class="progress is-whrite is-small" value="100%" max="30">30%</progress>
27 |   </section>
28 | </template>
29 | <script>
30 | export default {};
31 | </script>
32 | 
33 | <style scoped>
34 | .title {
35 |   text-align: left;
36 | }
37 | .subtitle {
38 |   text-align: right;
39 | }
40 | </style>


--------------------------------------------------------------------------------
/src/components/forumHome/SecendTiles.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="tile is-ancestor">
  3 |     <div class="tile is-vertical is-8">
  4 |       <progress class="progress is-whrite is-small" value="100%" max="30">30%</progress>
  5 |       <div class="tile">
  6 |         <div class="tile is-parent is-vertical">
  7 |           <article class="tile is-child box">
  8 |             <div class="fuck">
  9 |               <p class="title">最新发布的帖子</p>
 10 |               <div class="box" v-for="(item, i) in info" :key="i">
 11 |                 <article class="media">
 12 |                   <figure class="media-left">
 13 |                     <p class="image is-64x64">
 14 |                       <img :src="require(`@/assets/${item.user.userImg}`)" class="size" />
 15 |                       <!-- <img src="../../assets/user1.jpg" alt /> -->
 16 |                     </p>
 17 |                   </figure>
 18 |                   <div class="media-content">
 19 |                     <div class="content">
 20 |                       <p>
 21 |                         <strong>{{ item.user.userName }}</strong>
 22 |                         <br />
 23 |                         {{ item.article.artTitle }}
 24 |                       </p>
 25 |                     </div>
 26 |                     <nav class="level is-mobile">
 27 |                       <div class="level-left">
 28 |                         <a class="level-item">
 29 |                           <span class="icon is-small">
 30 |                             <i class="fab fa-hotjar"></i>
 31 |                           </span>
 32 |                           {{ item.article.artHotNum }}
 33 |                         </a>
 34 | 
 35 |                         <a class="level-item">
 36 |                           <span class="icon is-small">
 37 |                             <i class="fas fa-comment-dots"></i>
 38 |                           </span>
 39 |                           {{ item.article.artComNum }}
 40 |                         </a>
 41 | 
 42 |                         <a class="level-item">
 43 |                           <span class="icon is-small">
 44 |                             <i class="fas fa-heart"></i>
 45 |                           </span>
 46 |                           {{ item.article.artLikeNum }}
 47 |                         </a>
 48 |                       </div>
 49 |                     </nav>
 50 |                   </div>
 51 |                   <div class="media-right">
 52 |                     <a class="navbar-item" slot="trigger" role="button">
 53 |                       <b-button type="is-info" @click="detail(i)">查看详情</b-button>
 54 |                     </a>
 55 |                   </div>
 56 |                 </article>
 57 |               </div>
 58 |             </div>
 59 |             <hr />
 60 |           </article>
 61 |         </div>
 62 | 
 63 |         <div class="tile is-parent">
 64 |           <article class="tile is-child box">
 65 |             <p class="title">放学校风景图</p>
 66 |             <b-carousel>
 67 |               <b-carousel-item v-for="(carousel, i) in 6" :key="i">
 68 |                 <section :class="`hero is-medium `">
 69 |                   <div class="hero-body has-text-centered">
 70 |                     <span class="image">
 71 |                       <img :src="getImgUrl(i)" />
 72 |                     </span>
 73 |                   </div>
 74 |                 </section>
 75 |               </b-carousel-item>
 76 |             </b-carousel>
 77 |           </article>
 78 |         </div>
 79 |       </div>
 80 |       <div class="tile is-parent">
 81 |         <article class="tile is-child box">
 82 |           <p class="title">友情链接</p>
 83 |           <hr />
 84 |           <div class="content">
 85 |             <a href="https://stackoverflow.com/">StackOverflow</a>&nbsp;
 86 |             <a href="https://github.com/">GitHub</a>&nbsp;
 87 |             <a href="https://www.youtube.com/">YouTube</a>&nbsp;
 88 |             <a href="https://tuna.moe/">清华大学TUNA协会</a>
 89 |           </div>
 90 |         </article>
 91 |       </div>
 92 |     </div>
 93 |     <div class="tile is-parent">
 94 |       <article class="tile is-child box">
 95 |         <div class="content">
 96 |           <p class="title">用户人气榜</p>
 97 | 
 98 |           <div class="card" v-for="(user,k) in users" :key="k">
 99 |             <div class="card-content">
100 |               <div class="media">
101 |                 <div class="media-left">
102 |                   <figure class="image is-48x48">
103 |                     <img :src="require(`@/assets/${user.userImg}`)" class="size" />
104 |                     <!-- <img src="../../assets/user1.jpg" alt /> -->
105 |                   </figure>
106 |                 </div>
107 |                 <div class="media-content">
108 |                   <p class="title is-4" v-if="user.userSex==='女'">
109 |                     大名：{{user.userName}}
110 |                     <i class="fas fa-female"></i>
111 |                   </p>
112 | 
113 |                   <p class="title is-4" v-else>
114 |                     大名：{{user.userName}}
115 |                     <i class="fas fa-male"></i>
116 |                   </p>
117 |                 </div>
118 |               </div>
119 | 
120 |               <div class="content">
121 |                 <p>格言：{{user.userShow}}</p>
122 |                 <i class="far fa-hand-point-right">个人主页</i>
123 |                 <br />粉丝数：
124 |                 <i class="fab fa-gratipay">{{user.userFans}}</i>
125 |                 <br />
126 |               </div>
127 |             </div>
128 |           </div>
129 |         </div>
130 |       </article>
131 |     </div>
132 |   </div>
133 | </template>
134 | 
135 | <script>
136 | import { getnew } from "@/api";
137 | import { gethotuser } from "@/api";
138 | 
139 | export default {
140 |   data() {
141 |     return {
142 |       users: [
143 |         {
144 |           userId: 0,
145 |           userPassword: 0,
146 |           userName: "",
147 |           userEmail: "",
148 |           userSex: "",
149 |           userPhone: "",
150 |           userStatus: 0,
151 |           userTime: "",
152 |           userShow: "",
153 |           userBlog: "",
154 |           userImg: "",
155 |           userFans: 0,
156 |           userConcern: 0
157 |         }
158 |       ],
159 |       info: [
160 |         {
161 |           article: {
162 |             artId: 0,
163 |             artUserId: 1,
164 |             artTitle: "",
165 |             artTypeId: 0,
166 |             artContent: "",
167 |             artCommentId: 0,
168 |             artCreTime: "",
169 |             artView: "",
170 |             artComNum: 0,
171 |             artHotNum: 0,
172 |             artLikeNum: 0
173 |           },
174 |           user: {
175 |             userId: 0,
176 |             userPassword: 0,
177 |             userName: "",
178 |             userEmail: "",
179 |             userSex: "",
180 |             userPhone: "",
181 |             userStatus: 0,
182 |             userTime: "",
183 |             userShow: "",
184 |             userBlog: "",
185 |             userImg: "",
186 |             userFans: 0,
187 |             userConcern: 0
188 |           }
189 |         }
190 |       ]
191 |     };
192 |   },
193 |   methods: {
194 |     getImgUrl(value) {
195 |       return `https://picsum.photos/id/43${value}/576/400`;
196 |     },
197 |     detail(i) {
198 |       const detaildata = this.info[i];
199 |       this.$router.push({
200 |         path: "/details",
201 |         query: {
202 |           detaildata: JSON.stringify(detaildata)
203 |         }
204 |       });
205 |     }
206 |   },
207 |   mounted() {
208 |     getnew().then(res => {
209 |       this.info = res.data.content;
210 |     });
211 |     gethotuser().then(res => {
212 |       const { data } = res;
213 | 
214 |       this.users = data.content;
215 |     });
216 |   },
217 |   components: {}
218 | };
219 | </script>
220 | 
221 | 
222 | <style scoped>
223 | .hero.is-medium .hero-body {
224 |   padding-top: 0rem;
225 |   padding-bottom: 3rem;
226 | }
227 | .fuck {
228 |   height: 300px;
229 | 
230 |   overflow-y: auto;
231 | }
232 | </style>


--------------------------------------------------------------------------------
/src/components/forumHome/Tiles.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="tile is-ancestor">
  3 |     <div class="tile is-parent">
  4 |       <article class="tile is-child box">
  5 |         <p class="subtitle">热门板块</p>
  6 | 
  7 |         <b-carousel>
  8 |           <b-carousel-item v-for="(content, index) in contents" :key="index">
  9 |             <section>
 10 |               <div class="hero-body has-text-centered">
 11 |                 <div class="card">
 12 |                   <header class="card-header">
 13 |                     <p class="card-header-title">板块名:{{ content.typeName }}</p>
 14 |                     <a href="#" class="card-header-icon" aria-label="more options">
 15 |                       <span class="icon">
 16 |                         <i class="fas fa-angle-down" aria-hidden="true"></i>
 17 |                       </span>
 18 |                     </a>
 19 |                   </header>
 20 |                   <div class="card-content">
 21 |                     <div class="content">
 22 |                       板块简介:{{ content.typeDesc }}
 23 |                       <br />
 24 |                     </div>
 25 |                   </div>
 26 |                   <footer class="card-footer">
 27 |                     <a href="#" class="card-footer-item">关注</a>
 28 |                     <a href="#" class="card-footer-item">进入板块</a>
 29 |                   </footer>
 30 |                 </div>
 31 |               </div>
 32 |             </section>
 33 |           </b-carousel-item>
 34 |         </b-carousel>
 35 |       </article>
 36 |     </div>
 37 |     <div class="tile is-parent is-8">
 38 |       <article class="tile is-child box">
 39 |         <p align="right">
 40 |           <b-button type="button is-info" outlined @click="allart">全部帖子</b-button>
 41 |         </p>
 42 |         <p class="subtitle">热门帖子</p>
 43 | 
 44 |         <div class="box" v-for="(item, i) in $store.state.info" :key="i">
 45 |           <article class="media">
 46 |             <figure class="media-left">
 47 |               <p class="image is-64x64">
 48 |                 <img :src="require(`@/assets/${item.user.userImg}`)" class="size" />
 49 |                 <!-- <img src="../../assets/user1.jpg" alt /> -->
 50 |               </p>
 51 |             </figure>
 52 |             <div class="media-content">
 53 |               <div class="content">
 54 |                 <p>
 55 |                   <strong>{{ item.user.userName }}</strong>
 56 |                   <br />
 57 |                   {{ item.article.artTitle }}
 58 |                 </p>
 59 |               </div>
 60 |               <nav class="level is-mobile">
 61 |                 <div class="level-left">
 62 |                   <a class="level-item">
 63 |                     <span class="icon is-small">
 64 |                       <i class="fab fa-hotjar"></i>
 65 |                     </span>
 66 |                     {{ item.article.artHotNum }}
 67 |                   </a>
 68 | 
 69 |                   <a class="level-item">
 70 |                     <span class="icon is-small">
 71 |                       <i class="fas fa-comment-dots"></i>
 72 |                     </span>
 73 |                     {{ item.article.artComNum }}
 74 |                   </a>
 75 | 
 76 |                   <a class="level-item">
 77 |                     <span class="icon is-small">
 78 |                       <i class="fas fa-heart"></i>
 79 |                     </span>
 80 |                     {{ item.article.artLikeNum }}
 81 |                   </a>
 82 |                 </div>
 83 |               </nav>
 84 |             </div>
 85 |             <div class="media-right">
 86 |               <a class="navbar-item" slot="trigger" role="button">
 87 |                 <b-button type="is-info" outlined @click="details(i)">查看详情</b-button>
 88 |               </a>
 89 |             </div>
 90 |           </article>
 91 |         </div>
 92 |         <Pageination />
 93 |       </article>
 94 |     </div>
 95 |   </div>
 96 | </template>
 97 | 
 98 | <script>
 99 | import { getHotArticleType } from "@/api";
100 | // import { getPageMain } from "@/api";
101 | import Pageination from "../forumHome/Pageination.vue";
102 | export default {
103 |   data() {
104 |     return {
105 |       // info: [
106 |       //   {
107 |       //     article: {
108 |       //       artId: 0,
109 |       //       artUserId: 1,
110 |       //       artTitle: "",
111 |       //       artTypeId: 0,
112 |       //       artContent: "",
113 |       //       artCommentId: 0,
114 |       //       artCreTime: "",
115 |       //       artView: "",
116 |       //       artComNum: 0,
117 |       //       artHotNum: 0,
118 |       //       artLikeNum: 0
119 |       //     },
120 |       //     user: {
121 |       //       userId: 0,
122 |       //       userPassword: 0,
123 |       //       userName: "",
124 |       //       userEmail: "",
125 |       //       userSex: "",
126 |       //       userPhone: "",
127 |       //       userStatus: 0,
128 |       //       userTime: "",
129 |       //       userShow: "",
130 |       //       userBlog: "",
131 |       //       userImg: "",
132 |       //       userFans: 0,
133 |       //       userConcern: 0
134 |       //     }
135 |       //   }
136 |       // ],
137 |       contents: {
138 |         typeId: 0,
139 |         typeName: "",
140 |         typeCreateTime: "",
141 |         typeDesc: "",
142 |         articleNum: 0
143 |       }
144 |     };
145 |   },
146 |   mounted() {
147 |     getHotArticleType()
148 |       .then(res => {
149 |         const { data } = res;
150 |         this.contents = data.content;
151 |       })
152 |       .catch(() => {});
153 | 
154 |     this.$store.dispatch("getpagemain");
155 |     //bug，应该用action异步处理，再提交commit状态，明日更新（已解决）
156 |     // getPageMain()
157 |     //   .then(res => {
158 |     //     const { data } = res;
159 |     //     this.info = data.content;
160 |     //   })
161 |     //   .catch(() => {});
162 |   },
163 |   methods: {
164 |     allart() {
165 |       this.$router.push("/allarticlehome");
166 |     },
167 |     details(i) {
168 |       const detaildata = this.$store.state.info[i];
169 |       console.log(detaildata);
170 |       this.$router.push({
171 |         path: "/details",
172 |         query: {
173 |           detaildata: JSON.stringify(detaildata)
174 |         }
175 |       });
176 |     }
177 |   },
178 |   components: {
179 |     Pageination
180 |   }
181 | };
182 | </script>
183 | 
184 | <style scoped>
185 | .subtitle {
186 |   text-align: left;
187 | }
188 | .button {
189 |   text-align: center;
190 |   margin: 0 auto;
191 | }
192 | .size {
193 |   width: 64px;
194 |   height: 64px;
195 | }
196 | </style>
197 | 


--------------------------------------------------------------------------------
/src/components/forumHome/Top.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <nav class="navbar is-light" role="navigation" aria-label="main navigation">
  3 |     <div class="navbar-brand">
  4 |       <a class="navbar-item" href="https://bulma.io">
  5 |         <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
  6 |       </a>
  7 | 
  8 |       <a
  9 |         role="button"
 10 |         class="navbar-burger burger"
 11 |         aria-label="menu"
 12 |         aria-expanded="false"
 13 |         data-target="navbarBasicExample"
 14 |       >
 15 |         <span aria-hidden="true"></span>
 16 |         <span aria-hidden="true"></span>
 17 |         <span aria-hidden="true"></span>
 18 |       </a>
 19 |     </div>
 20 | 
 21 |     <div id="navbarBasicExample" class="navbar-menu">
 22 |       <div class="navbar-start">
 23 |         <a class="navbar-item">首页</a>
 24 | 
 25 |         <a class="navbar-item">热榜</a>
 26 | 
 27 |         <div class="navbar-item has-dropdown is-hoverable">
 28 |           <a class="navbar-link">更多</a>
 29 | 
 30 |           <div class="navbar-dropdown">
 31 |             <a class="navbar-item" @click="userhome">个人主页</a>
 32 |             <a class="navbar-item">全部板块</a>
 33 |             <a class="navbar-item">全部帖子</a>
 34 |             <hr class="navbar-divider" />
 35 |             <a class="navbar-item">Report an issue</a>
 36 |           </div>
 37 |         </div>
 38 |         <div class="level-left">
 39 |           <div class="level-item">
 40 |             <p class="subtitle is-5"></p>
 41 |           </div>
 42 |           <div class="level-item">
 43 |             <div class="field has-addons">
 44 |               <p class="control">
 45 |                 <input class="input" type="text" placeholder="Find a post" />
 46 |               </p>
 47 |               <p class="control">
 48 |                 <button class="button">搜索</button>
 49 |               </p>
 50 |             </div>
 51 |           </div>
 52 |         </div>
 53 |       </div>
 54 | 
 55 |       <div class="navbar-end" v-if="!$store.state.isLogin">
 56 |         <div class="navbar-item">
 57 |           <div class="buttons">
 58 |             <b-button type="is-info" outlined @click="register">注册</b-button>
 59 |             <div class="navbar-menu">
 60 |               <div class="navbar-end">
 61 |                 <b-dropdown position="is-bottom-left" aria-role="menu" trap-focus>
 62 |                   <a class="navbar-item" slot="trigger" role="button">
 63 |                     <b-button type="is-info" outlined>登录</b-button>
 64 |                   </a>
 65 | 
 66 |                   <b-dropdown-item aria-role="menu-item" :focusable="false" custom paddingless>
 67 |                     <div class="modal-card" style="width:300px;">
 68 |                       <section class="modal-card-body">
 69 |                         <b-field label="Email">
 70 |                           <b-input type="email" v-model="email" placeholder="Your email" required></b-input>
 71 |                         </b-field>
 72 | 
 73 |                         <b-field label="密码">
 74 |                           <b-input
 75 |                             type="password"
 76 |                             password-reveal
 77 |                             placeholder="Your password"
 78 |                             required
 79 |                             v-model="password"
 80 |                           ></b-input>
 81 |                         </b-field>
 82 | 
 83 |                         <b-checkbox>记住我</b-checkbox>
 84 |                       </section>
 85 |                       <footer class="modal-card-foot">
 86 |                         <button class="button is-primary" @click="login">登录</button>
 87 |                       </footer>
 88 |                     </div>
 89 |                   </b-dropdown-item>
 90 |                 </b-dropdown>
 91 |               </div>
 92 |             </div>
 93 |           </div>
 94 |         </div>
 95 |       </div>
 96 |       <div v-else-if="$store.state.isLogin">
 97 |         <div>
 98 |           <i class="far fa-address-card">{{$store.state.user.userName}}</i>
 99 |         </div>
100 |         <div @click="logout">
101 |           <i class="fas fa-sign-out-alt">登出</i>
102 |         </div>
103 |       </div>
104 |     </div>
105 |   </nav>
106 | </template>
107 | 
108 | <script>
109 | import { userLogin } from "@/api";
110 | 
111 | export default {
112 |   data() {
113 |     return {
114 |       email: "",
115 |       password: ""
116 |     };
117 |   },
118 |   methods: {
119 |     logout() {
120 |       this.$store.commit("logout");
121 |     },
122 |     userhome() {
123 |       this.$router.push("/userhome");
124 |     },
125 |     login() {
126 |       userLogin(this.email, this.password)
127 |         .then(res => {
128 |           const { data } = res;
129 |           this.user = data;
130 |           console.log(data);
131 |           if (data != null) {
132 |             this.$store.dispatch("aLogin", {
133 |               user: data,
134 |               message: "牛逼",
135 |               success: () => {
136 |                 console.log("欢迎您");
137 |               }
138 |             });
139 |           } else {
140 |             alert("该用户不存在");
141 |           }
142 |         })
143 |         .catch(() => {});
144 |     },
145 |     register() {
146 |       this.$router.push("/registerhome");
147 |     }
148 |   }
149 | };
150 | </script>
151 | 


--------------------------------------------------------------------------------
/src/components/register/FirstStep.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="first">
 3 |     <section>
 4 |       <b-field label="用户名">
 5 |         <b-input v-model="userName" placeholder="username" maxlength="30"></b-input>
 6 |         <!-- required pattern="[A-Za-z][A-Za-z0-9_]{4,14}"
 7 |         validation-message="用户名不能为空!"-->
 8 |       </b-field>
 9 | 
10 |       <b-field label="邮箱">
11 |         <b-input type="email" v-model="userEmail" placeholder="Your email" required></b-input>
12 |       </b-field>
13 | 
14 |       <b-field label="密码">
15 |         <b-input
16 |           type="password"
17 |           password-reveal
18 |           placeholder="Your password"
19 |           required
20 |           v-model="userPassword"
21 |         ></b-input>
22 |       </b-field>
23 |     </section>
24 |     <b-button type="is-info" outlined rounded @click="first">保存</b-button>
25 |   </div>
26 | </template>
27 | 
28 | 
29 | <script>
30 | import { SnackbarProgrammatic as Snackbar } from "buefy";
31 | export default {
32 |   data() {
33 |     return {
34 |       userName: "",
35 |       userEmail: "",
36 |       userPassword: ""
37 |     };
38 |   },
39 |   methods: {
40 |     first() {
41 |       this.$store.commit("first", {
42 |         userName: this.userName,
43 |         userEmail: this.userEmail,
44 |         userPassword: this.userPassword
45 |       });
46 |       if (
47 |         this.$store.state.registeruser.userName != "" &&
48 |         this.$store.state.registeruser.userEmail != "" &&
49 |         this.$store.state.registeruser.userPassword != ""
50 |       ) {
51 |         Snackbar.open("保存成功");
52 |       } else {
53 |         this.$buefy.snackbar.open({
54 |           duration: 5000,
55 |           message: "请填写完整信息",
56 |           type: "is-danger",
57 |           position: "is-bottom-left",
58 |           actionText: "确定",
59 |           queue: false,
60 |           onAction: () => {
61 |             this.$buefy.toast.open({
62 |               message: "信息填写完整再点击保存",
63 |               queue: false
64 |             });
65 |           }
66 |         });
67 |       }
68 |     }
69 |   }
70 | };
71 | </script>
72 | 
73 | <style scoped>
74 | .first {
75 |   text-align: center;
76 |   float: left;
77 |   width: 500px;
78 |   height: 400px;
79 | }
80 | </style>


--------------------------------------------------------------------------------
/src/components/register/RegisterHome.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <b-steps type="is-info">
 4 |       <b-step-item label="第一步" icon="account-key">
 5 |         <FirstStep />
 6 | 
 7 |         <img src="../../assets/401.gif" alt />
 8 |       </b-step-item>
 9 |       <b-step-item label="第二步" icon="account">
10 |         <SecendStep />
11 |       </b-step-item>
12 |       <b-step-item label="第三步" icon="account-plus">
13 |         <ThirdStep /><img src=https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646 alt />
14 |       </b-step-item>
15 |     </b-steps>
16 |   </section>
17 | </template>
18 | 
19 | 
20 | <script>
21 | import FirstStep from "../register/FirstStep";
22 | import SecendStep from "../register/SecendStep";
23 | import ThirdStep from "../register/ThirdStep";
24 | export default {
25 |   components: {
26 |     FirstStep,
27 |     SecendStep,
28 |     ThirdStep
29 |   }
30 | };
31 | </script>
32 | 
33 | 
34 | <style scoped>
35 | </style>


--------------------------------------------------------------------------------
/src/components/register/SecendStep.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="secend">
 3 |     <section class="f">
 4 |       <b-field label="电话" :label-position="labelPosition">
 5 |         <b-input
 6 |           v-model="userPhone"
 7 |           required
 8 |           pattern="^((\d{11})|(\d{7,8})|(\d{4}|\d{3})-(\d{7,8}))$"
 9 |           validation-message="请输入正确的电话号码!"
10 |         ></b-input>
11 |       </b-field>
12 | 
13 |       <b-field label="性别" :label-position="labelPosition">
14 |         <b-select placeholder="选择性别" v-model="userSex">
15 |           <option value="男">男</option>
16 |           <option value="女">女</option>
17 |         </b-select>
18 |       </b-field>
19 | 
20 |       <b-field label="个性签名" :label-position="labelPosition">
21 |         <b-input maxlength="200" type="textarea" v-model="userShow"></b-input>
22 |       </b-field>
23 | 
24 |       <hr />
25 |     </section>
26 |     <b-button type="is-info" outlined rounded @click="secend">保存</b-button>
27 |   </div>
28 | </template>
29 | 
30 | <script>
31 | import { SnackbarProgrammatic as Snackbar } from "buefy";
32 | export default {
33 |   data() {
34 |     return {
35 |       labelPosition: "on-border",
36 |       userShow: "",
37 |       userPhone: "",
38 |       userSex: ""
39 |     };
40 |   },
41 |   methods: {
42 |     secend() {
43 |       this.$store.commit("secend", {
44 |         userShow: this.userShow,
45 |         userPhone: this.userPhone,
46 |         userSex: this.userSex
47 |       });
48 |       if (
49 |         this.$store.state.registeruser.userPhone != "" &&
50 |         this.$store.state.registeruser.userShow != "" &&
51 |         this.$store.state.registeruser.userSex != ""
52 |       ) {
53 |         Snackbar.open("保存成功");
54 |       } else {
55 |         this.$buefy.snackbar.open({
56 |           duration: 5000,
57 |           message: "请填写完整信息",
58 |           type: "is-danger",
59 |           position: "is-bottom-left",
60 |           actionText: "确定",
61 |           queue: false,
62 |           onAction: () => {
63 |             this.$buefy.toast.open({
64 |               message: "信息填写完整再点击保存",
65 |               queue: false
66 |             });
67 |           }
68 |         });
69 |       }
70 |     }
71 |   }
72 | };
73 | </script>
74 | 
75 | <style scoped>
76 | .secend {
77 |   margin: auto;
78 |   width: 500px;
79 |   height: 500px;
80 |   text-align: center;
81 | }
82 | .f {
83 |   padding-top: 8rem;
84 | }
85 | </style>
86 | 


--------------------------------------------------------------------------------
/src/components/register/ThirdStep.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="third">
 3 |     <section>
 4 |       <div class="content">
 5 |         <h3>用户须知</h3>
 6 |         <p>
 7 |           本论坛项目刊载的所有内容，包括文字、图片、音频、视频、软件、程序、以及网页版式设计等均在网上搜集。注册时要填写以下项目：
 8 |           用户名: 中英文即可
 9 |           密码: 不易过于简单。建议6位以上，数字、字母、字符，至少2种混合。
10 |           Email: 必填，作为登录账号
11 |           性别: 请选择 男或女
12 |           填写完毕，点提交
13 |         </p>
14 |       </div>
15 |       <b-collapse :open="false" position="is-bottom" aria-id="contentIdForA11y1">
16 |         <a slot="trigger" slot-scope="props" aria-controls="contentIdForA11y1">
17 |           <b-icon :icon="!props.open ? 'menu-down' : 'menu-up'"></b-icon>
18 |           {{ !props.open ? '查看全部' : '收起' }}
19 |         </a>
20 |         <p>
21 |           本论坛提供的内容仅用于个人学习、研究或欣赏。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关
22 |           访问者可将本网站提供的内容或服务用于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯本网站及相关权利人的合法权利。
23 |           本网站内容原作者如不愿意在本网站刊登内容，请及时通知本站，予以删除。
24 |           本论坛由cp3开发完成，主要是面向在校大学生用于日常交流学习，同时欢迎大佬提供改进意见。我的GitHub账号：
25 |           <a
26 |             href="https://github.com/Chp3"
27 |           >Chp3</a>
28 |         </p>
29 |       </b-collapse>
30 |     </section>
31 |     <b-button rounded type="is-info" @click="submit">提交注册信息</b-button>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 | import { register } from "@/api";
37 | export default {
38 |   data() {
39 |     return {};
40 |   },
41 |   methods: {
42 |     submit() {
43 |       console.log(this.$store.state.registeruser.userName);
44 |       const userName = this.$store.state.registeruser.userName;
45 |       const userPassword = this.$store.state.registeruser.userPassword;
46 |       const userShow = this.$store.state.registeruser.userShow;
47 |       const userEmail = this.$store.state.registeruser.userEmail;
48 |       const userPhone = this.$store.state.registeruser.userPhone;
49 |       const userSex = this.$store.state.registeruser.userSex;
50 | 
51 |       if (
52 |         userName === "" &&
53 |         userPassword === "" &&
54 |         userShow === "" &&
55 |         userEmail === "" &&
56 |         userPhone === "" &&
57 |         userSex === ""
58 |       ) {
59 |         alert("确定信息填写完整了吗？");
60 |       } else {
61 |         register(
62 |           userName,
63 |           userPassword,
64 |           userShow,
65 |           userEmail,
66 |           userPhone,
67 |           userSex
68 |         ).then(res => {
69 |           const { data } = res;
70 |           if (data === 200) {
71 |             this.$router.go(-1);
72 |           }
73 |         });
74 |       }
75 |     }
76 |   }
77 | };
78 | </script>
79 | 
80 | <style scoped>
81 | .third {
82 |   text-align: center;
83 |   float: right;
84 |   width: 500px;
85 |   height: 500px;
86 | }
87 | .content {
88 |   margin-bottom: 0 !important;
89 | }
90 | </style>


--------------------------------------------------------------------------------
/src/components/userhome/UserHome.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div id="Top">
  4 |       <div class="content">
  5 |         <div style="padding-top: 6px;">
  6 |           <table cellpadding="0" cellspacing="0" border="0" width="100%">
  7 |             <tbody>
  8 |               <tr>
  9 |                 <td width="570" align="left" style="padding-top: 2px;">
 10 |                   <a href="/" class="top">首页</a>
 11 |                 </td>
 12 |               </tr>
 13 |             </tbody>
 14 |           </table>
 15 |         </div>
 16 |       </div>
 17 |     </div>
 18 |     <div id="Wrapper">
 19 |       <div class="content">
 20 |         <div id="Leftbar"></div>
 21 |         <div id="Rightbar">
 22 |           <div class="sep20"></div>
 23 |           <div class="box">
 24 |             <div class="cell">&nbsp;{{this.$store.state.user.userName}} 个人信息</div>
 25 | 
 26 |             <nav class="level is-mobile">
 27 |               <div class="level-item has-text-centered">
 28 |                 <div>
 29 |                   <p class="heading">发帖数</p>
 30 |                   <p>{{mypostnum}}</p>
 31 |                 </div>
 32 |               </div>
 33 |               <div class="level-item has-text-centered">
 34 |                 <div>
 35 |                   <p class="heading">粉丝</p>
 36 |                   <p>123</p>
 37 |                 </div>
 38 |               </div>
 39 |               <div class="level-item has-text-centered">
 40 |                 <div>
 41 |                   <p class="heading">你关注的人数</p>
 42 |                   <p>456K</p>
 43 |                 </div>
 44 |               </div>
 45 |               <div class="level-item has-text-centered">
 46 |                 <div>
 47 |                   <p class="heading">获赞数</p>
 48 |                   <p>789</p>
 49 |                 </div>
 50 |               </div>
 51 |             </nav>
 52 |           </div>
 53 |           <div class="sep20"></div>
 54 |         </div>
 55 |         <div id="Main">
 56 |           <div class="sep20"></div>
 57 |           <div class="box">
 58 |             <div class="cell">
 59 |               <table cellpadding="0" cellspacing="0" border="0" width="100%">
 60 |                 <tbody>
 61 |                   <tr>
 62 |                     <td width="73" valign="top" align="center">
 63 |                       <img
 64 |                         :src="require(`@/assets/${$store.state.user.userImg}`)"
 65 |                         class="avatar"
 66 |                         border="0"
 67 |                         align="default"
 68 |                       />
 69 |                       <!-- <img
 70 |                         src="//cdn.v2ex.com/gravatar/873548b247e76e0e16ac5f8280c0004c?s=73&amp;d=retro"
 71 |                         class="avatar"
 72 |                         border="0"
 73 |                         align="default"
 74 |                       />-->
 75 |                       <div class="sep10"></div>
 76 |                       <strong class="online">ONLINE</strong>
 77 |                     </td>
 78 |                     <td width="10"></td>
 79 |                     <td width="auto" valign="top" align="left">
 80 |                       <div class="fr"></div>
 81 |                       <h1 style="margin-bottom: 5px;">{{this.$store.state.user.userName}}</h1>
 82 |                       <span class="gray">
 83 |                         <div class="sep5"></div>
 84 |                         {{$store.state.user.userShow}}
 85 |                       </span>
 86 |                       <div class="sep10"></div>
 87 |                     </td>
 88 |                   </tr>
 89 |                 </tbody>
 90 |               </table>
 91 |               <div class="sep5"></div>
 92 |             </div>
 93 |           </div>
 94 |           <div class="sep20"></div>
 95 | 
 96 |           <div class="sep20"></div>
 97 |           <div class="box">
 98 |             <div class="inner">
 99 |               <span class="gray">你的帖子</span>
100 |             </div>
101 |             <div class="inner">
102 |               <span class="chevron">»</span>
103 |               <div class="box" v-for="(item, i) in mypost" :key="i">
104 |                 <article class="media">
105 |                   <div class="media-content">
106 |                     <div class="content">
107 |                       <p>
108 |                         <strong>{{item.artTitle}}</strong>
109 |                         <br />
110 |                         {{item.artContent}}
111 |                       </p>
112 |                     </div>
113 |                     <nav class="level is-mobile">
114 |                       <div class="level-left">
115 |                         <a class="level-item">
116 |                           <span class="icon is-small">
117 |                             <i class="fab fa-hotjar"></i>
118 |                           </span>
119 |                           {{item.artHotNum}}
120 |                         </a>
121 | 
122 |                         <a class="level-item">
123 |                           <span class="icon is-small">
124 |                             <i class="fas fa-comment-dots"></i>
125 |                           </span>
126 |                           {{item.artComNum}}
127 |                         </a>
128 | 
129 |                         <a class="level-item">
130 |                           <span class="icon is-small">
131 |                             <i class="fas fa-heart"></i>
132 |                           </span>
133 |                           {{item.artLikeNum}}
134 |                         </a>
135 |                       </div>
136 |                     </nav>
137 |                   </div>
138 |                 </article>
139 |               </div>
140 |             </div>
141 |           </div>
142 |         </div>
143 |       </div>
144 |       <div class="c"></div>
145 |       <div class="sep20"></div>
146 |     </div>
147 |   </div>
148 | </template>
149 | 
150 | 
151 | <script>
152 | import { findartbyuserid } from "@/api";
153 | 
154 | export default {
155 |   data() {
156 |     return {
157 |       mypostnum: 0,
158 |       mypost: [
159 |         {
160 |           artId: 0,
161 |           artComNum: 0,
162 |           artCommentId: 0,
163 |           artContent: "",
164 |           artCreTime: "",
165 |           artHotNum: "",
166 |           artLikeNum: "",
167 |           artTitle: "",
168 |           artTypeId: 0,
169 |           artUserId: "",
170 |           artView: ""
171 |         }
172 |       ]
173 |     };
174 |   },
175 |   created() {
176 |     findartbyuserid(this.$store.state.user.userId).then(res => {
177 |       const { data } = res;
178 |       this.mypost = data;
179 |       this.mypostnum = data.length;
180 |     });
181 |   }
182 | };
183 | </script>
184 | 
185 | 
186 | <style scoped>
187 | .gray {
188 |   color: #999;
189 | }
190 | .inner {
191 |   padding: 10px;
192 |   font-size: 14px;
193 |   line-height: 150%;
194 |   text-align: left;
195 | }
196 | #Wrapper {
197 |   text-align: center;
198 |   background-color: #e2e2e2;
199 |   background-image: url(/static/img/shadow_light.png);
200 |   background-repeat: repeat-x;
201 | }
202 | #Rightbar {
203 |   width: 270px;
204 |   float: right;
205 |   margin-right: 20px;
206 | }
207 | .box {
208 |   background-color: var(--box-background-color);
209 |   border-radius: var(--box-border-radius);
210 |   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
211 |   border-bottom: 1px solid #e2e2e2;
212 | }
213 | table[Attributes] {
214 |   -webkit-border-horizontal-spacing: 0px;
215 |   -webkit-border-vertical-spacing: 0px;
216 |   border-top-width: 0px;
217 |   border-right-width: 0px;
218 |   border-bottom-width: 0px;
219 |   border-left-width: 0px;
220 |   width: 100%;
221 | }
222 | user agent stylesheet table {
223 |   display: table;
224 |   border-collapse: separate;
225 |   border-spacing: 2px;
226 |   border-color: grey;
227 | }
228 | .cell_tabs {
229 |   padding: 10px 10px 0;
230 |   border-bottom: 1px solid var(--box-border-color);
231 |   text-align: center;
232 | }
233 | .cell_tab:link,
234 | .cell_tab:visited {
235 |   font-size: 14px;
236 |   border-bottom: 3px solid transparent;
237 |   display: inline-block;
238 |   text-decoration: none;
239 |   margin-right: 15px;
240 |   padding: 0 5px 5px;
241 |   color: #99a;
242 | }
243 | 
244 | a:active,
245 | a:link,
246 | a:visited {
247 |   color: #778087;
248 |   text-decoration: none;
249 |   word-break: break-word;
250 | }
251 | user agent stylesheet a:-webkit-any-link {
252 |   color: -webkit-link;
253 |   cursor: pointer;
254 |   text-decoration: underline;
255 | }
256 | .cell_tabs {
257 |   padding: 10px 10px 0;
258 |   border-bottom: 1px solid var(--box-border-color);
259 |   text-align: center;
260 | }
261 | user agent stylesheet a:-webkit-any-link {
262 |   color: -webkit-link;
263 |   cursor: pointer;
264 |   text-decoration: underline;
265 | }
266 | .fl {
267 |   float: left;
268 | }
269 | img[Attributes] {
270 |   width: 18px;
271 |   vertical-align: middle;
272 | }
273 | .cell {
274 |   padding: 10px;
275 |   font-size: 14px;
276 |   line-height: 120%;
277 |   text-align: left;
278 |   border-bottom: 1px solid #e2e2e2;
279 | }
280 | .box {
281 |   background-color: #fff;
282 |   border-radius: 3px;
283 |   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
284 |   border-bottom: 1px solid #e2e2e2;
285 | }
286 | #Main {
287 |   width: auto;
288 |   margin: 0 310px 0 20px;
289 | }
290 | #Leftbar {
291 |   width: 0;
292 |   float: left;
293 | }
294 | .c {
295 |   clear: both;
296 | }
297 | .sep20 {
298 |   height: 20px;
299 | }
300 | .content {
301 |   min-width: 600px;
302 |   max-width: 1100px;
303 |   margin: 0 auto;
304 | }
305 | #Top {
306 |   text-align: center;
307 |   background-color: #fff;
308 |   height: 44px;
309 |   font-size: 15px;
310 |   font-weight: 500;
311 |   background-size: 44px 44px;
312 |   border-bottom: 1px solid rgba(0, 0, 0, 0.22);
313 |   padding: 0 20px;
314 | }
315 | user agent stylesheet div {
316 |   display: block;
317 | }
318 | body {
319 |   padding: 0px;
320 |   margin: 0px;
321 |   font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Segoe UI",
322 |     "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
323 | }
324 | :root {
325 |   --box-background-color: #fff;
326 |   --box-background-alt-color: #f9f9f9;
327 |   --box-background-hover-color: #fafafa;
328 |   --box-foreground-color: #000;
329 |   --box-border-color: #e2e2e2;
330 |   --box-border-radius: 3px;
331 | }
332 | user agent stylesheet html {
333 |   color: -internal-root-color;
334 | }
335 | #Top > .content {
336 |   max-width: 1060px;
337 | }
338 | .content {
339 |   min-width: 600px;
340 |   max-width: 1100px;
341 |   margin: 0 auto;
342 | }
343 | table[Attributes] {
344 |   -webkit-border-horizontal-spacing: 0px;
345 |   -webkit-border-vertical-spacing: 0px;
346 |   border-top-width: 0px;
347 |   border-right-width: 0px;
348 |   border-bottom-width: 0px;
349 |   border-left-width: 0px;
350 |   width: 100%;
351 | }
352 | table {
353 |   display: table;
354 |   border-collapse: separate;
355 |   border-spacing: 2px;
356 |   border-color: grey;
357 | }
358 | tbody {
359 |   display: table-row-group;
360 |   vertical-align: middle;
361 |   border-color: inherit;
362 | }
363 | tr {
364 |   display: table-row;
365 |   vertical-align: inherit;
366 |   border-color: inherit;
367 | }
368 | td[Attributes] {
369 |   width: 110px;
370 |   text-align: -webkit-left;
371 | }
372 | user agent stylesheet td {
373 |   display: table-cell;
374 |   vertical-align: inherit;
375 | }
376 | a:active,
377 | a:link,
378 | a:visited {
379 |   color: #778087;
380 |   text-decoration: none;
381 |   word-break: break-word;
382 | }
383 | user agent stylesheet a:-webkit-any-link {
384 |   color: -webkit-link;
385 |   cursor: pointer;
386 |   text-decoration: underline;
387 | }
388 | #Logo {
389 |   width: 94px;
390 |   height: 30px;
391 |   background-image: url(/static/img/v2ex@2x.png);
392 |   background-size: 94px 30px;
393 |   background-repeat: no-repeat;
394 |   display: inline-block;
395 | }
396 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import router from "./router";
 4 | import store from "./store";
 5 | import Buefy from "buefy";
 6 | import "buefy/dist/buefy.css";
 7 | import axios from "axios";
 8 | import VueAxios from "vue-axios";
 9 | import ElementUI from "element-ui";
10 | import "element-ui/lib/theme-chalk/index.css";
11 | import moment from 'moment'//导入文件
12 | // import infiniteScroll from "vue-infinite-scroll"
13 | // import Qs from "qs";
14 | 
15 | 
16 | 
17 | // Vue.use(infiniteScroll)
18 | Vue.prototype.$moment = moment;//赋值使用
19 | moment.locale('zh-cn')//国际化，中文
20 | Vue.use(Buefy);
21 | Vue.use(ElementUI);
22 | Vue.config.productionTip = false;
23 | Vue.use(VueAxios, axios);
24 | 
25 | new Vue({
26 |   router,
27 |   store,
28 |   axios,
29 |   // render: function (h) {
30 |   //   return h(App);
31 |   // }
32 |   render: h => h(App)
33 | }).$mount("#app");
34 | 
35 | // axios.all([axios.post("http://localhost:9090/getuser", Qs.stringify({
36 | //   username: "sasd",
37 | //   password: 123
38 | // })), axios.post("http://localhost:9090/getuser",
39 | //   Qs.stringify({
40 | //     username: "saaa",
41 | //     password: 1234
42 | //   }))]).then(axios.spread((res1, res2) => {
43 | //     console.log(res1)
44 | //     console.log(res2)
45 | //   }))
46 | 
47 | // axios({
48 | //   url: "http://localhost:9090/getadmin",
49 | //   params: {
50 | //     username: "aaaa"
51 | //   }
52 | 
53 | // })
54 | 
55 | // axios.post("http://localhost:9090/getadmin", Qs.stringify({
56 | //   username: '55551',
57 | //   password: 1245
58 | // }))
59 | router.beforeEach((to, from, next) => {
60 |   if (to.matched.some(m => m.meta.requireAuth)) {
61 | 
62 |     // 对路由进行验证
63 |     if (store.state.isLogin) { // 已经登陆
64 |       next() // 正常跳转到你设置好的页面
65 |     } else {
66 |       // 未登录则跳转到登陆界面
67 |       next({ path: '/login' })
68 |     }
69 |   } else {
70 |     next()
71 |   }
72 | })
73 | 
74 | 
75 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import VueRouter from "vue-router";
 3 | import NotFoundComponent from "../components/NotFoundComponent.vue";
 4 | 
 5 | Vue.use(VueRouter);
 6 | 
 7 | const routes = [
 8 |   {
 9 |     path: "/",
10 |     name: "forumhome",
11 |     component: () => import("../components/forumHome/ForumHome.vue")
12 |   },
13 |   {
14 |     path: "/login",
15 |     name: "login",
16 |     component: () => import("../components/Login.vue")
17 |   },
18 |   {
19 |     path: "/loginbackstage",
20 |     name: "loginbackstage",
21 |     component: () => import("../components/backstagehome/LoginBackStage.vue")
22 |   },
23 | 
24 |   {
25 |     path: "/backstagehome",
26 |     component: () => import("../components/backstagehome/BackStageHome.vue"),
27 |     children: [
28 |       {
29 |         path: "/usermanger",
30 |         name: "usermanger",
31 |         component: () => import("../components/backstagehome/UserManger.vue")
32 |       },
33 |       {
34 |         path: "/articlemanger",
35 |         name: "articlemanger",
36 |         component: () => import("../components/backstagehome/ArticleManger.vue")
37 |       },
38 |       {
39 |         path: "/typemanger",
40 |         name: "typemanger",
41 |         component: () => import("../components/backstagehome/TypeManger.vue")
42 |       }
43 |     ]
44 |   },
45 |   {
46 |     path: "/userhome",
47 |     meta: { requireAuth: true },
48 |     component: () => import("../components/userhome/UserHome")
49 |   },
50 |   {
51 |     path: "/allarticlehome",
52 |     component: () => import("../components/articlehome/Allarticlehome")
53 |   },
54 | 
55 |   {
56 |     path: "/registerhome",
57 |     component: () => import("../components/register/RegisterHome")
58 |   },
59 | 
60 |   {
61 |     path: "*", component: NotFoundComponent
62 |   },
63 |   {
64 |     path: "/details",
65 |     name: "Details",
66 |     component: () => import("../components/articlehome/Details")
67 |   },
68 |   {
69 |     path: "/postarticle",
70 |     name: "PostArticle",
71 |     component: () => import("../components/articlehome/PostArticle")
72 |   }
73 |   ,
74 | ];
75 | 
76 | const router = new VueRouter({
77 |   mode: "history",
78 |   base: process.env.BASE_URL,
79 |   routes
80 | });
81 | 
82 | 
83 | 
84 | export default router;
85 | 


--------------------------------------------------------------------------------
/src/store/actions.js:
--------------------------------------------------------------------------------
 1 | import { getPageMain } from "@/api"
 2 | 
 3 | export default {
 4 |     //context:上下文，actions中的默认参数，理解成store对象
 5 |     aLogin(context, payload) {
 6 |         setTimeout(() => {
 7 |             context.commit('login', payload.user)
 8 |             console.log(payload.message);
 9 |             payload.success();
10 |         }, 1000)
11 |     },
12 | 
13 | 
14 | 
15 |     getpagemain(context) {
16 |         getPageMain().then(res => {
17 |             context.commit('getpagemain', {
18 |                 info: res.data.content,
19 |                 totalElements: res.data.totalElements
20 |             }
21 | 
22 |             )
23 |         }).catch()
24 |     },
25 | 
26 |     changepage(context, number) {
27 |         getPageMain(number).then(res => {
28 |             context.commit('getpagemain', {
29 |                 info: res.data.content
30 |             })
31 |         }).catch()
32 |     },
33 | 
34 | 
35 | 
36 | 
37 | 
38 | 
39 | }//包含多个对应事件回调函数得对象，主要是异步操作


--------------------------------------------------------------------------------
/src/store/getters.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     //抽离
 3 | 
 4 | 
 5 |     //如果需要传入参数，则可返回一个回调函数
 6 |     //例如：组件中{{$store.getters.moreAgestu(10)}}
 7 |     // moreAgestu(state) {
 8 |     //   return function (age) {
 9 |     //     return state.students.filter(s => s.age > age);
10 |     //   }
11 |     // }
12 | 
13 | 
14 | 
15 | 
16 |     // more20stu(state) {
17 |     //   return state.students.filter(s => s.age > 20);返回的是结果
18 |     // },
19 |     //在组件中写{{$store.getters.more20stu}}
20 |     //getters还可以作为参数
21 |     //例如：
22 |     // more20stulength(state, getters) {
23 |     //   return getters.more20stu.length;结果
24 |     // }
25 |     //powcounter(state) {
26 |     //return state.counter * state.counter;结果
27 |     //}
28 |     //组件中使用getters
29 |     //{{$store.getters.powcounter}}
30 | }


--------------------------------------------------------------------------------
/src/store/help.md:
--------------------------------------------------------------------------------
 1 | 如果是父子组件，则状态管理不需要用vuex，只需通过props，父组件向子组件传值即可
 2 | 
 3 | 
 4 | 例如父组件中
 5 | `<template>
 6 |     <div>
 7 |         <h2>{{counter}}</h2>
 8 |         <button @click="counter++"></button>
 9 |         <button @click="counter--"></button>
10 |         <son :counter="counter"/> ：绑定，不能去掉，去掉之后传的是字符串，在这里传递的是变量，前面的counter是子组件的变量名，后面是父组件中传递的变量名
11 |     </div>
12 | </template>`
13 | 
14 | `<script>
15 | import son from '/son.vue'
16 | export default{
17 |     components:{
18 |         son
19 |     },
20 |     data(){
21 |         return{
22 |             counter:0
23 |         }
24 |     }
25 | }
26 | </script>`
27 | 
28 | 子组件中
29 | `<template>
30 |     <div>
31 |         <h2>{{counter}}</h2>
32 |     </div>
33 | </template>`
34 | 
35 | `<script>
36 | export default{
37 |     props:{
38 |         counter:Number(传过来的值的类型)
39 |     }
40 | }
41 | </script>`
42 | 
43 | 
44 | 
45 | 
46 | vue的响应式原理
47 | 
48 | 增加：
49 | Vue.set(state.xxx,key,value|number)
50 | 删除：
51 | vue.delete(state.info,'age')
52 | 
53 | Mutation同步函数
54 | Actions异步操作
55 | 
56 | 开发注册功能，进度放慢，因为一些考试


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuex from "vuex";
 3 | import getters from '../store/getters';
 4 | import mutations from '../store/mutations';
 5 | import actions from '../store/actions';
 6 | Vue.use(Vuex);
 7 | 
 8 | //全局状态管理，相当于一个公共变量，并且是响应式的，任何一个组件更改其内容，可以响应式更新页面
 9 | 
10 | // const moduleA = {
11 | //   state: {
12 | //   name:"dddd"
13 | // },
14 | //   getters: {},
15 | //   actions: {},
16 | //   mutations:{}
17 | // }
18 | 
19 | export default new Vuex.Store({
20 | 
21 |   state: {
22 |     isLogin: window.localStorage.getItem('isLogin' || '[]') == null ? '' : true,
23 |     user: {
24 |       userName: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).userName,
25 |       userId: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).userId,
26 |       userBlog: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).userBlog,
27 |       userConcern: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).userConcern,
28 |       userFans: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).userFans,
29 |       userImg: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).userImg,
30 |       userShow: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).userShow,
31 |       userSex: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).userSex,
32 |       userPhone: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).userPhone,
33 |     },
34 |     info: [
35 |       {
36 |         article: {
37 |           artId: 0,
38 |           artUserId: 1,
39 |           artTitle: "",
40 |           artTypeId: 0,
41 |           artContent: "",
42 |           artCommentId: 0,
43 |           artCreTime: "",
44 |           artView: "",
45 |           artComNum: 0,
46 |           artHotNum: 0,
47 |           artLikeNum: 0
48 |         },
49 |         user: {
50 |           userId: 0,
51 |           userPassword: 0,
52 |           userName: "",
53 |           userEmail: "",
54 |           userSex: "",
55 |           userPhone: "",
56 |           userStatus: 0,
57 |           userTime: "",
58 |           userShow: "",
59 |           userBlog: "",
60 |           userImg: "",
61 |           userFans: 0,
62 |           userConcern: 0
63 |         }
64 |       }
65 |     ],
66 |     totalElements: 16,
67 |     registeruser: {
68 |       userName: "",
69 |       userEmail: "",
70 |       userSex: "",
71 |       userShow: "",
72 |       userPhone: "",
73 |       userPassword: ""
74 |     }
75 |   },
76 |   mutations,
77 |   actions,
78 |   modules: {},
79 |   getters
80 | });
81 | 


--------------------------------------------------------------------------------
/src/store/mutations.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     //mutations提交风格ccc(state,payload){}
 3 |     //mutation包括两部分1：字符串的事件类型2：一个回调函数，该回调函数的第一个参数就是state
 4 |     //login是事件类型，后面是回调函数
 5 |     login(state, user) {
 6 |         state.isLogin = true;
 7 |         state.user = user;
 8 |         window.localStorage.setItem('user', JSON.stringify(user));
 9 |         window.localStorage.setItem('isLogin', true)
10 |     },
11 |     logout(state) {
12 |         state.isLogin = '';
13 |         window.localStorage.removeItem('user')
14 |         window.localStorage.removeItem('isLogin')
15 |     },
16 | 
17 |     getpagemain(state, payload) {
18 |         state.info = payload.info;
19 |         // state.totalPages = payload.totalPages;
20 |         state.totalElements = payload.totalElements;
21 |     },
22 | 
23 |     first(state, payload) {
24 |         state.registeruser.userName = payload.userName;
25 |         state.registeruser.userPassword = payload.userPassword
26 |         state.registeruser.userEmail = payload.userEmail
27 |     },
28 | 
29 |     secend(state, payload) {
30 |         state.registeruser.userPhone = payload.userPhone;
31 |         state.registeruser.userSex = payload.userSex;
32 |         state.registeruser.userShow = payload.userShow;
33 |     },
34 | 
35 |     details(state, info) {
36 |         state.info = info
37 |     }
38 | 
39 |     //带参数
40 |     // login1(state, conut) {
41 |     //   state.isLogin = conut;
42 |     // }
43 |     // //组件中定义方法@click="ccc"
44 |     // ccc(){
45 |     //   this.store.commit('login1',true)
46 |     // }
47 | 
48 | 
49 | 
50 |     //方法
51 | }//包含多个更新state函数得对象


--------------------------------------------------------------------------------
/tests/unit/example.spec.js:
--------------------------------------------------------------------------------
 1 | import { shallowMount } from "@vue/test-utils";
 2 | import HelloWorld from "@/components/HelloWorld.vue";
 3 | 
 4 | describe("HelloWorld.vue", () => {
 5 |   it("renders props.msg when passed", () => {
 6 |     const msg = "new message";
 7 |     const wrapper = shallowMount(HelloWorld, {
 8 |       propsData: { msg }
 9 |     });
10 |     expect(wrapper.text()).toMatch(msg);
11 |   });
12 | });
13 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     publicPath: "/",
3 | 
4 | };
5 | 


--------------------------------------------------------------------------------