服务计算作业九——前后端分离的开发

实现过程

本次作业中我负责的部分是前端。
前端的实现使用了vue这款轻量级框架，在经过一些基本使用方法的学习之后实现也不算太难。

vue的安装和启动这些部分由于都是输入相应命令即可，因此不再赘述，主要讲讲代码的实现。

使用vue开发只需要修改其中src部分，而src中又主要以写components和router为主。

router/index.js：

import Vue from 'vue'
import Router from 'vue-router'
import Start from '@/components/Start'
import Index from '@/components/Index'
import ArticleDetails from '@/components/ArticleDetails'
import Login from '@/components/Login'
import Register from '@/components/Register'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'start',
      component: Start
    },
    {
      path: '/index',
      name: 'index',
      component: Index
    },
    {
      path: '/article/details/:id',
      name: 'article details',
      component: ArticleDetails
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/register',
      name: 'register',
      component: Register
    }
  ],
  mode: 'history'
})

该文件定义了一些路由的信息，意义大概是输入/xxx，就根据component中的xxx来进行页面渲染。

而component中的组成部分大体和html相似，虽然有少量不同，但是经过相关学习也能很快上手，如开始的界面start.vue：

<template>
  <div id="app">
    <div class="choose">
      <el-menu
    :router="true"
    :default-active="this.$route.path"
    class="header"
    mode="horizontal"
    @select="handleSelect"
    background="none"
    active-text-color="rgb(87,215,238)">
      <el-menu-item index="/user" v-if="this.$store.state.username" style='height:50px;width:150px'>
        {{ this.$store.state.username }}
      </el-menu-item>
      <el-menu-item class = "log" index="/login" v-if="this.$store.state.username" style='height:50px;background:red;width:150px'>Logout</el-menu-item>
      <div v-else="">
        <el-menu-item class = "log" index="/register" style='height:40px'>Register</el-menu-item>
        <el-menu-item class = "log" index="/login" style='height:40px'>Login</el-menu-item>
      </div>
    </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Start'
}
</script>

<style>
body {
  background-image: url('../img/2.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 100%;
  height: 100%;
  margin: 0;
}
.choose{
    width: 20%;
    height: 50%;
    margin: 0 auto;
    margin-top: 15%;
    text-align: center;
    background: #24232360;
    padding: 20px 50px;
    color: rgb(87, 215, 238);
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

其他详细代码可以到源代码中查看。

前端界面效果

开始界面，可以选择登录或者注册：

注册界面，还有格式检查：

登录界面：

登录成功后，可以查看博客：

支持翻页功能：

而且有登出按钮，可以回到登录界面。

博客内支持评论：


动图展示：

源代码地址：

开发感想

在本次开发中我负责前端部分的开发，主要学习使用了vue框架，vue框架对于初学者确实非常友好，而且网上能够轻松找到参考的学习资料，而且本次作业要求不高，仅仅了解一些最基本的知识即可完成，如果要深入了解，还能学到更多东西。而且通过与后端开发的组员交流、查看后端的代码方式，也能学到一些后端的知识。