devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

超详细的前后端实战项目（Spring系列加上vue3）前端篇（二）（一步步实现+源码）

作者：我家自动化 | 2024-05-28 15:24:31

赞

踩

超详细的前后端实战项目（Spring系列加上vue3）前端篇（二）（一步步实现+源码）

好了，兄弟们，继昨天的项目之后，开始继续敲前端代码，完成前端部分

昨天完成了全局页面的代码，和登录页面的代码，不过昨天的代码还有一些需要补充的，这里添加一下

内容补充：在调用登录接口之后进行一个页面的跳转

先介绍一下router路由的使用吧（知道的兄弟们可以跳过哦）

页面的路由：1.安装vue-router ：npm install vue-router @4 (在终端输入命令即可)。2.在index.js中创建路由器并导出。3.main.js中使用，4.<router-view>中展示

（这里因为刚开始创建项目的时候点击了vue Router，脚手架已经帮我们生成好了，那就不用管了，前三步自动完成，我们只管使用就好了）

这里在Login页面中添加

  1. import {useRouter} from 'vue-router'
  2. const router = useRouter()
  3. const login = async()=>{
  4.     let result = await userLoginService(loginData.value);
  5.     renderIcon(result.msg?result.msg:'登录成功');
  6.     router.push('/')
  7. }

添加完这几行代码就OK了，这里我们可以试一下能不能跳转，

emmmm，因为暂时没有进行后端的开发，如果要测试的话，此时要么把调用后端的函数给注释了，要么使用接口测试工具（感觉好麻烦）

  1. <script setup>
  2. // import { h } from 'vue';
  3. // import { IconExclamationCircleFill } from '@arco-design/web-vue/es/icon';
  4. import { ref } from "vue";
  5. // import {userLoginService} from '../api/user'
  6. import {useRouter} from 'vue-router'
  7. const router = useRouter()
  8. const loginData = ref({
  9.   username: "",
  10.   password: "",
  11.   isRead: false,
  12. });
  13.  
  14.  
  15. const rules = [
  16.   {
  17.     validator: (value, cb) => {
  18.       return new Promise((resolve) => {
  19.         window.setTimeout(() => {
  20.           if (value !== " ") {
  21.             cb("content not empty");
  22.           }
  23.           resolve();
  24.         }, 1000);
  25.       });
  26.     },
  27.   },
  28. ];
  29. // const renderIcon = () => h(IconExclamationCircleFill);
  30. const login = async()=>{
  31.     // let result = await userLoginService(loginData.value);
  32.     // renderIcon(result.msg?result.msg:'登录成功');
  33.     router.push('/')
  34. }
  35.  
  36. </script>

方便起见，还是用注释吧。

OK，我们来运行一下代码

在点击了Submit之后，成功跳转到了主页面，（记得把函数的注释去掉）

内容补充，GlobalPage.vue的样式修改（改了一下布局，现在能全局了）

  1. <style scoped>
  2. .global{
  3.   height: 100vh;
  4. }
  5. .layout-demo :deep(.arco-layout-header),
  6. .layout-demo :deep(.arco-layout-footer),
  7. .layout-demo :deep(.arco-layout-sider-children),
  8. .layout-demo :deep(.arco-layout-content) {
  9.   display: flex;
  10.   flex-direction: column;
  11.   justify-content: center;
  12.   color: var(--color-white);
  13.   font-size: 16px;
  14.   font-stretch: condensed;
  15.   text-align: center;
  16. }
  17.  
  18. .layout-demo :deep(.arco-layout-header),
  19. .layout-demo :deep(.arco-layout-footer) {
  20.   height: 64px;
  21.   background-color: var(--color-primary-light-4);
  22. }
  23.  
  24. .layout-demo :deep(.arco-layout-sider) {
  25.   width: 206px;
  26.   background-color: var(--color-primary-light-3);
  27. }
  28.  
  29. .layout-demo :deep(.arco-layout-content) {
  30.   background-color: rgb(var(--arcoblue-6));
  31. }
  32.  
  33. .footer {
  34.   background-color: aliceblue;
  35.   padding: 16px;
  36.   position: sticky;
  37.   bottom: 0;
  38.   left: 0;
  39.   right: 0;
  40.   text-align: center;
  41.   letter-spacing: 3px;
  42. }
  43. </style>

内容补充： 在登录页补充开发一下注册页面。

之前只写了登录页面，当然也得有注册页面，来打造一个

其实只要有了登录页面，对于注册页面也就不难了，

  1.     <div class="login-box" v-if="!isLogin">
  2.       <a-form
  3.         :model="loginData"
  4.         :style="{ width: '600px' }"
  5.         @submit="handleSubmit"
  6.         class="input-box"
  7.       >
  8.         <h2 style="margin-bottom: 60px">Login</h2>
  9.         <a-form-item
  10.           field="name"
  11.           tooltip="Please enter username"
  12.           label="账号"
  13.           class="element"
  14.           :rules="rules"
  15.         >
  16.           <a-input
  17.             v-model="loginData.username"
  18.             placeholder="please enter your username..."
  19.             style="margin-right: 40px"
  20.           />
  21.         </a-form-item>
  22.         <a-form-item field="post" label="密码" class="element" :rules="rules">
  23.           <a-input
  24.             v-model="loginData.password"
  25.             placeholder="please enter your password..."
  26.             style="margin-right: 40px"
  27.           />
  28.         </a-form-item>
  29.         <a-form-item field="isRead">
  30.           <a-checkbox v-model="loginData.isRead">
  31.             I have read the manual
  32.           </a-checkbox>
  33.         </a-form-item>
  34.         <a-form-item>
  35.           <a-button html-type="submit" class="input-box" @click="login"
  36.             >Submit</a-button
  37.           >
  38.         </a-form-item>
  39.         <div class="register-link">
  40.           <a @click="isLogin = !isLogin">Don't have an account? Create Now!</a>
  41.         </div>
  42.       </a-form>
  43.     </div>

这是之前登录页面的代码，我们直接把它复制一份，再把h2标签的login改成register就好了

此时页面上就出现了两个表单，还记得之前的搜素框控制显示隐藏吗，这个也是这样，甚至更加简单，

    <div class="login-box" v-if="!isLogin">在div标签这里用v-if来控制两个，

回忆之前的组件开发三部曲：前端样式代码（html，css）已经完成，下面开始数据绑定与事件

这里我们在script代码中加上

const isLogin = ref(false)  //记得引入ref（之前好像引入过了）

那么：登录页的div：     <div class="login-box" v-if="!isLogin">

           注册页的div：     <div class="login-box" v-if="isLogin">

这样就成功控制了一个显示一个隐藏的效果了（注意其中的逻辑关系，要让login先显示）

然后就是控制页面的转换了，当点击Don't have an account? Create Now!就转换到注册页，那么可以

        <div class="register-link">

          <a @click="isLogin = !isLogin">Don't have an account? Create Now!</a>

        </div>

加一个点击效果进行转换

除此之外，注册页面用的输入框可跟登录页不一样，这里可以去组件库找找

这里可以使用其中的一些输入框和表单校验方法，不过数据绑定这块建议继续用ref

然后我们前往api/user.js,为用户注册写调用后端接口方法（这里跟登录差不多）

  1. import request from '../utils/request'
  2.  
  3. //创建一个调用登录接口函数
  4. export const userLoginService = (loginData) =>{
  5.     //用urlSearchParams完成传递
  6.     const params = new URLSearchParams()
  7.     for(let key in loginData){
  8.         params.append(key,loginData[key]);
  9.     }
  10.     return request.post('/user/login',params);
  11. }
  12.  
  13. export const userRegisterService = (registerData) =>{
  14.     //用urlSearchParams完成传递
  15.     const params = new URLSearchParams()
  16.     for(let key in registerData){
  17.         params.append(key,registerData[key]);
  18.     }
  19.     return request.post('/user/register',params);
  20. }

不能说长得很像，只能说根本就是一模一样。。

然后我们在Login登录界面编写调用后端接口方法

const register = async () => {

  let result = await userRegisterService(registerData.value);

  renderIcon(result.msg ? result.msg : "注册成功");

};

然后在上面submit按钮上绑定@click=“register”即可

下面来展示一下登录页目前的全部代码：

  1. <template>
  2.   <div class="container">
  3.     <div class="login-box" v-if="!isLogin">
  4.       <a-form
  5.         :model="loginData"
  6.         :style="{ width: '600px' }"
  7.         @submit="handleSubmit"
  8.         class="input-box"
  9.       >
  10.         <h2 style="margin-bottom: 60px">Login</h2>
  11.         <a-form-item
  12.           field="name"
  13.           tooltip="Please enter username"
  14.           label="账号"
  15.           class="element"
  16.           :rules="rules"
  17.         >
  18.           <a-input
  19.             v-model="loginData.username"
  20.             placeholder="please enter your username..."
  21.             style="margin-right: 40px"
  22.           />
  23.         </a-form-item>
  24.         <a-form-item field="post" label="密码" class="element" :rules="loginRules">
  25.           <a-input
  26.             v-model="loginData.password"
  27.             placeholder="please enter your password..."
  28.             style="margin-right: 40px"
  29.           />
  30.         </a-form-item>
  31.         <a-form-item field="isRead">
  32.           <a-checkbox v-model="loginData.isRead">
  33.             I have read the manual
  34.           </a-checkbox>
  35.         </a-form-item>
  36.         <a-form-item>
  37.           <a-button html-type="submit" class="input-box" @click="login"
  38.             >Enter</a-button
  39.           >
  40.         </a-form-item>
  41.         <div class="register-link">
  42.           <a @click="isLogin = !isLogin">Don't have an account? Create Now!</a>
  43.         </div>
  44.       </a-form>
  45.     </div>
  46.  
  47.     <div class="login-box" v-if="isLogin">
  48.       <a-form
  49.         :model="loginData"
  50.         :style="{ width: '600px' }"
  51.         @submit="handleSubmit"
  52.         class="input-box"
  53.       >
  54.         <h2 style="margin-bottom: 60px">Register</h2>
  55.         <a-form
  56.           ref="formRef"
  57.           :rules="regRules"
  58.           :model="registerData"
  59.           :style="{ width: '600px' }"
  60.           @submit="handleSubmit"
  61.         >
  62.           <a-form-item field="name" label="账号" validate-trigger="blur">
  63.             <a-input
  64.               v-model="registerData.name"
  65.               placeholder="please enter your username..."
  66.                           style="margin-right: 60px"
  67.             />
  68.           </a-form-item>
  69.           <a-form-item field="password" label="密码" validate-trigger="blur">
  70.             <a-input-password
  71.               v-model="registerData.password"
  72.               placeholder="please enter your password..."
  73.                           style="margin-right: 60px"
  74.             />
  75.           </a-form-item>
  76.           <a-form-item
  77.             field="password2"
  78.             label="确认密码"
  79.             validate-trigger="blur"
  80.           >
  81.             <a-input-password
  82.               v-model="registerData.password2"
  83.               placeholder="please confirm your password..."
  84.                           style="margin-right: 60px"
  85.             />
  86.           </a-form-item>
  87.           <a-form-item field="email" label="email">
  88.             <a-input
  89.               v-model="registerData.email"
  90.               placeholder="please enter your email..."
  91.                           style="margin-right: 60px"
  92.             />
  93.           </a-form-item>
  94.         </a-form>
  95.         <a-form-item>
  96.           <a-button html-type="submit" class="input-box" @click="register"
  97.             >Submit</a-button
  98.           >
  99.         </a-form-item>
  100.         <div class="register-link">
  101.           <a @click="isLogin = !isLogin">Have Count? Login Now!</a>
  102.         </div>
  103.       </a-form>
  104.     </div>
  105.   </div>
  106. </template>
  107. <script setup>
  108. import { h } from "vue";
  109. import { IconExclamationCircleFill } from "@arco-design/web-vue/es/icon";
  110. import { ref } from "vue";
  111. import { userLoginService, userRegisterService } from "../api/user";
  112. import { useRouter } from "vue-router";
  113. const router = useRouter();
  114. const loginData = ref({
  115.   username: "",
  116.   password: "",
  117.   isRead: false,
  118. });
  119.  
  120. const loginRules = [
  121.   {
  122.     validator: (value, cb) => {
  123.       return new Promise((resolve) => {
  124.         window.setTimeout(() => {
  125.           if (value !== " ") {
  126.             cb("content not empty");
  127.           }
  128.           resolve();
  129.         }, 1000);
  130.       });
  131.     },
  132.   },
  133. ];
  134. const renderIcon = () => h(IconExclamationCircleFill);
  135. const login = async () => {
  136.   let result = await userLoginService(loginData.value);
  137.   renderIcon(result.msg ? result.msg : "登录成功");
  138.   router.push("/");
  139. };
  140.  
  141. const register = async () => {
  142.   let result = await userRegisterService(registerData.value);
  143.   renderIcon(result.msg ? result.msg : "登录成功");
  144. };
  145.  
  146. //登录注册页显示隐藏
  147. const isLogin = ref(false);
  148.  
  149. const handleSubmit = ({ values, errors }) => {
  150.   console.log("values:", values, "\nerrors:", errors);
  151. };
  152. const registerData = ref({
  153.   name: "",
  154.   password: "",
  155.   password2: "",
  156.   email: ""
  157. });
  158.  const regRules = {
  159.       name: [
  160.         {
  161.           required: true,
  162.           message:'name is required',
  163.         },
  164.       ],
  165.       password: [
  166.         {
  167.           required: true,
  168.           message:'password is required',
  169.         },
  170.       ],
  171.       password2: [
  172.         {
  173.           required: true,
  174.           message:'password is required',
  175.         },
  176.         {
  177.           validator: (value, cb) => {
  178.             if (value !== registerData.value.password) {
  179.               cb('two passwords do not match')
  180.             } else {
  181.               cb()
  182.             }
  183.           }
  184.         }
  185.       ],
  186.       email: [
  187.         {
  188.           type: 'email',
  189.           required: true,
  190.         }
  191.       ],
  192.   }
  193.   
  194.  
  195. </script>
  196.  
  197. <style scoped>
  198. * {
  199.   margin: 0;
  200.   padding: 0;
  201.   box-sizing: border-box;
  202.   font-family: "Poppins", sans-serif;
  203.   display: flex;
  204.   justify-content: center;
  205. }
  206. .container {
  207.   width: 100%;
  208.   height: 100vh;
  209.   background: url("../assets/background.jpg") no-repeat;
  210.   background-size: cover;
  211.   background-position: center;
  212.   display: flex;
  213.   justify-content: center;
  214.   align-items: center;
  215. }
  216.  
  217. .container .login-box {
  218.   position: relative;
  219.   width: 500px;
  220.   height: 580px;
  221.   background-color: transparent;
  222.   border: 2px solid rgba(255, 255, 255, 0.5);
  223.   border-radius: 20px;
  224.   display: flex;
  225.   justify-content: center;
  226.   align-items: center;
  227.   backdrop-filter: blur(15px);
  228. }
  229.  
  230. .login-box h2 {
  231.   font-size: 28px;
  232.   color: #fff;
  233.   text-align: center;
  234. }
  235.  
  236. .login-box .input-box {
  237.   position: relative;
  238.   width: 310px;
  239.   margin: 30px 0;
  240. }
  241.  
  242. .input-box input {
  243.   width: 80%;
  244.   height: 60px;
  245.   background: transparent;
  246.   border: none;
  247.   outline: none;
  248.   font-size: 16px;
  249.   color: #fff;
  250.   padding: 0 2px 0 5px;
  251. }
  252.  
  253. .input-box input::placeholder {
  254.   color: #f9f9f9;
  255. }
  256.  
  257. .input-box .icon {
  258.   position: absolute;
  259.   right: 8px;
  260.   color: #fff;
  261.   font-size: 16px;
  262.   line-height: 25px;
  263. }
  264.  
  265. .login-box .remember-forget {
  266.   margin: -15px 0 15px;
  267.   font-size: 15px;
  268.   color: #fff;
  269.   display: flex;
  270.   justify-content: space-between;
  271. }
  272.  
  273. .remember-forget label input {
  274.   margin-right: 30px;
  275. }
  276.  
  277. .login-box button {
  278.   width: 100%;
  279.   height: 40px;
  280.   background: #fff;
  281.   border: none;
  282.   outline: none;
  283.   border-radius: 40px;
  284.   cursor: pointer;
  285.   font-size: 16px;
  286.   color: #000;
  287.   transition: all 0.5s;
  288. }
  289.  
  290. .login-box button:hover {
  291.   background: #1f73c9;
  292.   color: #fff;
  293. }
  294.  
  295. .login-box .register-link {
  296.   font-size: 15px;
  297.   color: #fff;
  298.   text-align: center;
  299.   margin: 5px 0 5px;
  300. }
  301.  
  302. .remember-forget a,
  303. .register-link a {
  304.   color: #fff;
  305.   text-decoration: none;
  306. }
  307.  
  308. .remember-forget a:hover,
  309. .register-link a:hover {
  310.   text-decoration: underline;
  311. }
  312.  
  313. /* Responsive Design */
  314. @media (max-width: 460px) {
  315.   .container .login-box {
  316.     width: 350px;
  317.   }
  318.  
  319.   .login-box .input-box {
  320.     width: 290px;
  321.   }
  322. }
  323.  
  324. @media (max-width: 360px) {
  325.   .container .login-box {
  326.     width: 100%;
  327.     height: 100vh;
  328.     border: none;
  329.   }
  330. }
  331. .element {
  332.   margin: 20px 0;
  333. }
  334. </style>

全局页面跳转解决：

既然都讲到页面路由了，就多练练吧，

在全局页面（GlobalPage.vue）这一块我们把之前写死的searchPage去掉改成可变的router-view

  1. <template>
  2.   <a-layout style="height: 400px">
  3.     <a-layout-header><global-header></global-header></a-layout-header>
  4.     <a-layout>
  5.       <a-layout-sider theme="dark">Sider</a-layout-sider>
  6.       <a-layout-content><router-view></router-view></a-layout-content><!--就是这里-->
  7.  
  8.     </a-layout>
  9.     <a-layout-footer>
  10.       <global-footer class="footer"></global-footer>
  11.     </a-layout-footer>
  12.   </a-layout>
  13. </template>

然后就可以开始布置了，现在点击GlobalHeader.vue全局头部，

  1. <template>
  2.   <div class="menu-demo">
  3.     <a-menu mode="horizontal" theme="dark" :default-selected-keys="['1']">
  4.       <a-menu-item
  5.         key="0"
  6.         :style="{ padding: 0, marginRight: '38px' }"
  7.         disabled
  8.         class="logo"
  9.       >
  10.         <div
  11.           :style="{
  12.             width: '180px',
  13.             height: '30px',
  14.             background: 'var(--color-fill-3)',
  15.             cursor: 'text',
  16.           }"
  17.         ><img src="../assets/logo.png" width="180px"></div>
  18.       </a-menu-item>
  19.       <a-menu-item key="1"><router-link to="/main/search">全局搜索</router-link></a-menu-item>
  20.       <a-menu-item key="2"><router-link to="/main/article">文章大全</router-link></a-menu-item>
  21.       <a-menu-item key="3">Cloud Service</a-menu-item>
  22.       <a-menu-item key="4">Cooperation</a-menu-item>
  23.     </a-menu>

这里修改一下a-menu-item标签，（一般在组件库这里会有专门的跳转属性这种，不过今天好像组件库页面打不开了，那暂时就用原始版的router-link来实现一下吧，（之后我会修改一下的））

这里布置了两个页面，全局搜素和文章大全，进行跳转，然后呢，去index.js处创建一下主页面的子路由，

下面，看代码展示

  1. import { createRouter, createWebHashHistory } from 'vue-router'
  2. import MainPage from '../components/GlobalPage.vue'
  3. import LoginPage from '../components/LoginPage.vue'
  4. import SearchPage from '../views/SearchPage.vue'
  5. import ArticlePage from '../views/ArticlePage.vue'
  6. const routes = [
  7.   {
  8.     path: '/',
  9.     name: 'mainPage',
  10.     component: MainPage,
  11.     redirect: '/main/search',
  12.     children: [
  13.       {
  14.         path: '/main/search',
  15.         component: SearchPage
  16.       },
  17.       {
  18.         path: '/main/article',
  19.         component: ArticlePage
  20.       }
  21.     ]
  22.   },
  23.   {
  24.     path: '/login',
  25.     name: 'loginPage',
  26.     component: LoginPage
  27.   }
  28. ]
  29.  
  30. const router = createRouter({
  31.   history: createWebHashHistory(),
  32.   routes
  33. })
  34.  
  35. export default router

这里我目前添加了全局搜素和文章大全两个子页面（小细节：redirect: '/main/search',这里我使用了一个重定向，让每次进入‘/’页面的时候都会跳转到全局搜素页面处），全局搜素的页面之前已经写过了，那也就不用管了，这里我们添加以下文章大全的页面，在views文件夹下创建ArticlePage.vue文件用<vue>创建基本样子，

  1. <template>
  2.   <div id="article">
  3.     文章篇
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9.  
  10. }
  11. </script>
  12.  
  13. <style>
  14.  
  15. </style>

先随便写一点吧，主要是要能现在展现以下跳转。

目前来看就差不多了，来试试能不能实现跳转。

好嘞，那么现在也就实现了这一功能，

好了，目前主要的一些前端样子也就差不多了，这一期的项目主要还是练练手，就做一些最基本文章管理这些吧。

文章管理界面开发：

既然写界面，我觉得还是先来一手布局比较合适

来吧，组件库见：

这里我没想太多，直接用这个朴实无华的布局吧。

先用代码写个初始布局

  1. <template>
  2.   <div id="article">
  3.         <a-divider />
  4.     <a-layout style="height: 400px;">
  5.       <a-layout-header>Header</a-layout-header>
  6.        <a-divider orientation="left">热点文章</a-divider>
  7.       <a-layout-content>Content</a-layout-content>
  8.       <a-layout-footer>Footer</a-layout-footer>
  9.     </a-layout>
  10.     
  11.  
  12.   </div>
  13. </template>
  14.  
  15. <script>
  16. export default {
  17.  
  18. }
  19. </script>
  20.  
  21. <style scoped>
  22. body {
  23.   margin: 0;
  24.   background-color: #f5f5f5;
  25. }
  26.  
  27. /* fade-slide */
  28. .fade-slide-leave-active,
  29. .fade-slide-enter-active {
  30.   transition: all 0.3s;
  31. }
  32.  
  33. .fade-slide-enter-from {
  34.   transform: translateX(-30px);
  35.   opacity: 0;
  36. }
  37.  
  38. .fade-slide-leave-to {
  39.   transform: translateX(30px);
  40.   opacity: 0;
  41. }
  42. </style>

这里我加了一个带有文字的分割线

然后就是最关键的content内容区域了，这里可以加上一些样式，（如果对自己的前端没有太自信的话，直接组件库！）

好，看一手，我们先找一个滑动条

就这个了，

将滚动条放入content区域之后，小改一下代码，调整大小，适应一下屏幕大小就好看多了

  1. <template>
  2.   <div id="article">
  3.     <a-divider />
  4.     <a-layout style="height: 760px">
  5.       <a-layout-header class="header">文章管理</a-layout-header>
  6.       <a-divider orientation="left">Cetide-Net</a-divider>
  7.       <a-layout-content>
  8.         <a-scrollbar class="rollBar"
  9.           style="height: 673.34px; overflow: auto; margin: 10px 20px">
  10.           <div class="content">Content</div>
  11.         </a-scrollbar>
  12.       </a-layout-content>
  13.     </a-layout>
  14.   </div>
  15. </template>
  16.  
  17. <script>
  18. export default {};
  19. </script>
  20.  
  21. <style scoped>
  22. #article {
  23.   margin: 20px;
  24. }
  25.  
  26. /* fade-slide */
  27. .fade-slide-leave-active,
  28. .fade-slide-enter-active {
  29.   transition: all 0.3s;
  30. }
  31.  
  32. .fade-slide-enter-from {
  33.   transform: translateX(-30px);
  34.   opacity: 0;
  35. }
  36.  
  37. .fade-slide-leave-to {
  38.   transform: translateX(30px);
  39.   opacity: 0;
  40. }
  41. .header {
  42.   font-family: "Satisfy", cursive;
  43.   font-size: 26px;
  44.   color: rgb(93, 186, 216);
  45.   padding-left: 50px;
  46.   text-align: left;
  47. }
  48. .rollBar{
  49.   
  50. }
  51. .content {
  52.   height: 2000px;
  53.   width: 1424px;
  54.   background-color: var(--color-primary-light-4);
  55. }
  56. </style>

然后就是存放文章的了，这里可以找找组件库的列表组件：

这个组件就很奈斯（分页条，评论按键都有），因为这里主要是文章大全，所以就不用加上编辑和删除功能了，不过可以加上一个评论功能

这里加一个显示神评的吧，到时候把点赞数最多的评论放到让文章大全页面都能看到

修改一下代码，嵌入文章大全页面.

  1. <template>
  2.   <div id="article">
  3.     <a-divider />
  4.     <a-layout style="height: 760px">
  5.       <a-layout-header class="header">文章管理</a-layout-header>
  6.       <a-divider orientation="left">Cetide-Net</a-divider>
  7.       <a-layout-content>
  8.         <a-scrollbar class="rollBar"
  9.           style="height: 673.34px; overflow: auto; margin: 10px 20px">
  10.           <div class="content">
  11.  
  12.   <a-list
  13.     class="list-demo-action-layout"
  14.     :bordered="false"
  15.     :data="dataSource"
  16.     :pagination-props="paginationProps"
  17.   >
  18.     <template #item="{ item }">
  19.       <a-list-item class="list-demo-item" action-layout="vertical">
  20.         <template #actions>
  21.           <span><icon-heart />点赞 83</span>
  22.           <span><icon-star />收藏{{ item.index }}</span>
  23.           <span><icon-message />评论</span>
  24.         </template>
  25.         
  26.         <template #extra>
  27.           <div className="image-area">
  28.             <img alt="arco-design" :src="item.imageSrc" />
  29.           </div>
  30.         </template>
  31.  
  32.         <a-list-item-meta
  33.           :title="item.title"
  34.           :description="item.description"
  35.         >
  36.           <template #avatar>
  37.             <a-avatar shape="square">
  38.               <img alt="avatar" :src="item.avatar" />
  39.             </a-avatar>
  40.           </template>
  41.         </a-list-item-meta>
  42.  
  43.         <div style="width:100%; text-align: left; padding-left:20px">
  44.               <a-divider />
  45.           <a-comment author="Socrates" content="Comment body content." datetime="1 hour">
  46.     <template #avatar>
  47.       <a-avatar>
  48.         <img
  49.           alt="avatar"
  50.           src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
  51.         />
  52.       </a-avatar>
  53.     </template>
  54.   </a-comment>
  55.         </div>
  56.       </a-list-item>
  57.     </template>
  58.   </a-list>
  59.  
  60.           </div>
  61.         </a-scrollbar>
  62.       </a-layout-content>
  63.     </a-layout>
  64.   </div>
  65. </template>
  66.  
  67. <script>
  68. import { reactive } from 'vue'
  69.  
  70. const names = ['Socrates', 'Balzac', 'Plato'];
  71. const avatarSrc = [
  72.   '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
  73.   '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp',
  74.   '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp',
  75. ];
  76. const imageSrc = [
  77.   '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/29c1f9d7d17c503c5d7bf4e538cb7c4f.png~tplv-uwbnlip3yd-webp.webp',
  78.   '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/04d7bc31dd67dcdf380bc3f6aa07599f.png~tplv-uwbnlip3yd-webp.webp',
  79.   '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/1f61854a849a076318ed527c8fca1bbf.png~tplv-uwbnlip3yd-webp.webp',
  80. ];
  81. const dataSource = new Array(15).fill(null).map((_, index) => {
  82.   return {
  83.     index: index,
  84.     avatar: avatarSrc[index % avatarSrc.length],
  85.     title: names[index % names.length],
  86.     description:
  87.       'Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).',
  88.     imageSrc: imageSrc[index % imageSrc.length],
  89.   };
  90. });
  91.  
  92. export default {
  93.   setup() {
  94.     return {
  95.       dataSource,
  96.       paginationProps: reactive({
  97.         defaultPageSize: 3,
  98.         total: dataSource.length
  99.       })
  100.     }
  101.   },
  102. }
  103. </script>
  104.  
  105. <style scoped>
  106. #article {
  107.   margin: 20px;
  108. }
  109.  
  110. /* fade-slide */
  111. .fade-slide-leave-active,
  112. .fade-slide-enter-active {
  113.   transition: all 0.3s;
  114. }
  115.  
  116. .fade-slide-enter-from {
  117.   transform: translateX(-30px);
  118.   opacity: 0;
  119. }
  120.  
  121. .fade-slide-leave-to {
  122.   transform: translateX(30px);
  123.   opacity: 0;
  124. }
  125. .header {
  126.   font-family: "Satisfy", cursive;
  127.   font-size: 26px;
  128.   color: rgb(93, 186, 216);
  129.   padding-left: 50px;
  130.   text-align: left;
  131. }
  132. .rollBar{
  133.   
  134. }
  135. .content {
  136.   /* height: 2000px; */
  137.   width: 1424px;
  138. }
  139.  
  140. .list-demo-action-layout .image-area {
  141.   width: 183px;
  142.   height: 119px;
  143.   border-radius: 2px;
  144.   overflow: hidden;
  145.   
  146. }
  147.  
  148. .list-demo-action-layout .list-demo-item {
  149.   padding: 20px 0;
  150.   border-bottom: 1px solid var(--color-fill-3);
  151. }
  152.  
  153. .list-demo-action-layout .image-area img {
  154.   width: 100%;
  155. }
  156.  
  157. .list-demo-action-layout .arco-list-item-action .arco-icon {
  158.   margin: 0 4px;
  159. }
  160. </style>

大家一定要看懂一些组件代码才好使用，（后续调用后端接口，使用后端数据库的时候就会用到）

这一期的项目，打算就先做一个文章管理页面，加上用户个人中心的东西就差不多了（主要还是先熟悉熟悉流程，后面可以看看加上一些更好的功能（也不能只是crud哈））

用户个人中心界面开发：

在component文件夹下面创建一个UserCentre.vue页面

先做一个雏形：

然后在index.js中注册页面

  {

    path: '/user',

    name: 'userPage',

    component: UserPage

 }

然后做一个页面跳转吧，这里我们回到GlobalHeader.vue全局导航栏区域，

  1. <template>
  2.   <div class="menu-demo">
  3.     <a-menu mode="horizontal" theme="dark" :default-selected-keys="['1']">
  4.       <a-menu-item
  5.         key="0"
  6.         :style="{ padding: 0, marginRight: '38px' }"
  7.         disabled
  8.         class="logo"
  9.       >
  10.         <div
  11.           :style="{
  12.             width: '180px',
  13.             height: '30px',
  14.             background: 'var(--color-fill-3)',
  15.             cursor: 'text',
  16.           }"
  17.         ><img src="../assets/logo.png" width="180px"></div>
  18.       </a-menu-item>
  19.       <a-menu-item key="1"><router-link to="/main/search">全局搜索</router-link></a-menu-item>
  20.       <a-menu-item key="2"><router-link to="/main/article">文章大全</router-link></a-menu-item>
  21.       <a-menu-item key="3">Cloud Service</a-menu-item>
  22.       <a-menu-item key="4">Cooperation</a-menu-item>
  23.     </a-menu>
  24.     <div class="user-avatar">
  25.         <img src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
  26.           alt="User Avatar" class="avatar-image"/>
  27.       <div
  28.         class="dropdown"
  29.         style="font-family: 'Satisfy', cursive; margin-right: 20px"
  30.       >
  31.         <button class="dropdown-button">
  32.           <img src="../assets/list.png" width="15px" />
  33.         </button>
  34.         <div class="dropdown-content">
  35.           <a href="#">个人信息</a>
  36.           <a href="#">修改密码</a>
  37.           <a href="#">其他属性</a>
  38.           <a href="/#/login">退出登录</a>
  39.         </div>
  40.       </div>
  41.     </div>
  42.   </div>
  43. </template>
  44. <script setup>
  45.  
  46. </script>
  47.  
  48.  
  49.  
  50.  
  51. <style scoped>
  52. .logo{
  53.   float: left;
  54. }
  55. .menu-demo {
  56.   box-sizing: border-box;
  57.   width: 100%;
  58.   background-color: var(--color-neutral-2);
  59. }
  60. .user-avatar {
  61.   /* position: absolute;
  62.   right: 0;
  63.   top: 4px; */
  64. }
  65.  
  66. .avatar-image {
  67.   position: absolute;
  68.   top: 10px;
  69.   right: 16px;
  70.   width: 40px;
  71.   height: 40px;
  72.   border-radius: 50%;
  73.   cursor: pointer;
  74.   z-index: 10;
  75. }
  76.  
  77. .dropdown {
  78.   position: absolute;
  79.   top: 28px;
  80.   right: 50px;
  81.   display: inline-block;
  82.   z-index: 1;
  83. }
  84.  
  85. .dropdown-button {
  86.   background-color: #303030;
  87.   color: white;
  88.   padding: 5px 0px;
  89.   border: none;
  90.   cursor: pointer;
  91. }
  92.  
  93. .dropdown-content {
  94.   display: none;
  95.   position: absolute;
  96.   background-color: #f9f9f9;
  97.   min-width: 85px;
  98.   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  99.   z-index: 1;
  100. }
  101.  
  102. .dropdown-content a {
  103.   color: black;
  104.   padding: 8px 8px;
  105.   text-decoration: none;
  106.   display: block;
  107. }
  108.  
  109. .dropdown-content a:hover {
  110.   background-color: #f1f1f1;
  111. }
  112.  
  113. .dropdown:hover .dropdown-content {
  114.   display: block;
  115. }
  116. </style>

这里展示一下之前添加的一点点代码，然后在右上角添加了一个用户头像和一个下拉栏目（感觉代码写的不太好，这边还是建议大家去组件库里找一些比较方便的（这里我是自己写的））

  1. <template>
  2.   <div class="menu-demo">
  3.     <a-menu mode="horizontal" theme="dark" :default-selected-keys="['1']">
  4.       <a-menu-item
  5.         key="0"
  6.         :style="{ padding: 0, marginRight: '38px' }"
  7.         disabled
  8.         class="logo"
  9.       >
  10.         <div
  11.           :style="{
  12.             width: '180px',
  13.             height: '30px',
  14.             background: 'var(--color-fill-3)',
  15.             cursor: 'text',
  16.           }"
  17.         >
  18.           <img src="../assets/logo.png" width="180px" />
  19.         </div>
  20.       </a-menu-item>
  21.       <a-menu-item key="1"
  22.         ><router-link to="/main/search">全局搜索</router-link></a-menu-item
  23.       >
  24.       <a-menu-item key="2"
  25.         ><router-link to="/main/article">文章大全</router-link></a-menu-item
  26.       >
  27.       <a-menu-item key="3">Cloud Service</a-menu-item>
  28.       <a-menu-item key="4">Cooperation</a-menu-item>
  29.     </a-menu>
  30.     <div class="user-avatar">
  31.       <img
  32.         src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
  33.         alt="User Avatar"
  34.         class="avatar-image"
  35.       />
  36.       <div
  37.         class="dropdown"
  38.         style="font-family: 'Satisfy', cursive; margin-right: 20px"
  39.       >
  40.         <button class="dropdown-button">
  41.           <img src="../assets/list.png" width="15px" />
  42.         </button>
  43.         <div class="dropdown-content">
  44.           <router-link to="/user">个人信息</router-link>
  45.           <router-link to="/login">修改密码</router-link>
  46.           <router-link to="/login">其他属性</router-link>
  47.           <router-link to="/login">退出登录</router-link>
  48.         </div>
  49.       </div>
  50.     </div>
  51.   </div>
  52. </template>
  53. <script setup>
  54. </script>
  55.  
  56.  
  57.  
  58.  
  59. <style scoped>
  60. .logo {
  61.   float: left;
  62. }
  63. .menu-demo {
  64.   box-sizing: border-box;
  65.   width: 100%;
  66.   background-color: var(--color-neutral-2);
  67. }
  68. .user-avatar {
  69.   /* position: absolute;
  70.   right: 0;
  71.   top: 4px; */
  72. }
  73.  
  74. .avatar-image {
  75.   position: absolute;
  76.   top: 10px;
  77.   right: 16px;
  78.   width: 40px;
  79.   height: 40px;
  80.   border-radius: 50%;
  81.   cursor: pointer;
  82.   z-index: 10;
  83. }
  84.  
  85. .dropdown {
  86.   position: absolute;
  87.   top: 28px;
  88.   right: 50px;
  89.   display: inline-block;
  90.   z-index: 1;
  91. }
  92.  
  93. .dropdown-button {
  94.   background-color: #303030;
  95.   color: white;
  96.   padding: 5px 0px;
  97.   border: none;
  98.   cursor: pointer;
  99. }
  100.  
  101. .dropdown-content {
  102.   display: none;
  103.   position: absolute;
  104.   background-color: #f9f9f9;
  105.   min-width: 85px;
  106.   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  107.   z-index: 1;
  108. }
  109.  
  110. .dropdown-content a {
  111.   color: black;
  112.   padding: 8px 8px;
  113.   text-decoration: none;
  114.   display: block;
  115. }
  116.  
  117. .dropdown-content a:hover {
  118.   background-color: #f1f1f1;
  119. }
  120.  
  121. .dropdown:hover .dropdown-content {
  122.   display: block;
  123. }
  124. </style>

那么，这样就可以点击个人中心进行跳转到个人中心了（这里的退出登录bug很大，应该要调用专门的函数，去除登录状态什么的，之后有机会再改一下）

这里刚开始就是这样了，老样子，做个布局吧。

就用这个了

  1. <template>
  2.   <div id="userCenter">
  3.     <a-layout style="height: 100vh">
  4.       <a-layout-header>Header</a-layout-header>
  5.       <a-layout style="margin: 24px 120px">
  6.         <a-layout-sider>Sider</a-layout-sider>
  7.         <a-layout-content>Content</a-layout-content>
  8.       </a-layout>
  9.       <a-layout-footer>Footer</a-layout-footer>
  10.     </a-layout>
  11.   </div>
  12. </template>
  13.  
  14. <script>
  15. export default {};
  16. </script>
  17.  
  18. <style>
  19. </style>

稍微搭建一下用户界面吧，明天继续（hhh）（emmm，还以为今天能写完这部分的）

发一下代码吧（感觉这个代码后面要大改。。）

  1. <template>
  2.   <div id="userCenter">
  3.     <a-layout style="height: 100vh">
  4.       <a-layout-header>
  5.         <div class="header">
  6.             <div class="personal-introduce">
  7.               <span class="name">我是小丑</span>
  8.               <span class="sex-icon"></span>
  9.               <span class="level-icon"></span>
  10.             </div><div class="professional">演员，代表作:</div>
  11.         </div>
  12.       </a-layout-header>
  13.       <a-layout style="margin: 24px 120px">
  14.         <a-layout-sider>Sider</a-layout-sider>
  15.         <a-layout-content>Content</a-layout-content>
  16.       </a-layout>
  17.       <a-layout-footer>Footer</a-layout-footer>
  18.     </a-layout>
  19.   </div>
  20. </template>
  21.  
  22. <script>
  23. export default {};
  24. </script>
  25.  
  26. <style lang="scss" scoped>
  27. #userCenter {
  28.   background: url("../assets/image.png") no-repeat bottom center / 100%
  29.     100%;
  30. }
  31. .header {
  32.   height: 20vh;
  33.   margin-top: 5%;
  34.    background: url("../assets/back.png") no-repeat center / 90%
  35.     100%;
  36. }
  37.  
  38. .personal-introduce {
  39.         display: flex;
  40.         justify-content: center;
  41.         align-items: flex-end;
  42.         margin-top: 10px;
  43.         text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.31);
  44.         .name {
  45.           line-height: 29px;
  46.           font-size: 22px;
  47.         }
  48.         .sex-icon {
  49.           display: inline-block;
  50.           width: 16px;
  51.           height: 16px;
  52.           margin: 0px 8px;
  53.           margin-bottom: 4px;
  54.           background: url(../assets/user-images/sex-icon.png) no-repeat center;
  55.           background-size: contain;
  56.         }
  57.         .level-icon {
  58.           display: inline-block;
  59.           width: 16px;
  60.           height: 16px;
  61.           margin-bottom: 4px;
  62.           background: url(../assets/user-images/leval-icon.png) no-repeat center;
  63.           background-size: contain;
  64.         }
  65.       }
  66. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/638143
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号