服务构建与前后端分离的开发

服务构建与前后端分离的开发

github链接为：github

任务

主要负责前端部分，前端框架选择VUE，主要有首页、注册页、登陆页、详情页组成

页面展示

首页

<template>
  <div id="app">
  <el-menu
    :router="true"
    :default-active="this.$route.path"
    class="header"
    mode="horizontal"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="/" >
      主页
    </el-menu-item>
    <el-menu-item index="/user" style='float:right' v-if="this.$store.state.username">
      {{ this.$store.state.username }}
    </el-menu-item>
    <div v-else="">
      <el-menu-item class = "log" index="/join" style='float:right'>注册</el-menu-item>
      <el-menu-item class = "log" index="/login" style='float:right'>登陆</el-menu-item>
    </div>
  </el-menu>
    <router-view/>
  </div>
</template>

登录页

<template>
  <div class="hello">
      <h1>{{ msg }}</h1>
      <div>
          <el-input v-model="userID" placeholder="用户名" class='input'></el-input>
      </div>
      <br>
      <div>
          <el-input v-model="password" placeholder="密码" class='input' type='password'></el-input>
      </div>
      <br>
      <div>
        <el-button type="primary" @click="cilckLogin()">登录</el-button>
      </div>
  </div>
</template>

cilckLogin: function () {
      var that = this
      this.$axios.request({
        url: 'http://localhost:8081/user/login',
        method: 'Post',
        data: JSON.stringify({
          Username: this.userID,
          Password: this.password
        }),
        responseType: 'json'
      }).then(function (response) {
        console.log(response.data)
        if (!response.data.error) {
          that.$store.commit('saveToken', {
            username: that.userID,
            token: response.data.ok
          })
          that.$router.push('/')
        } else {
          alert(response.data.error)
        }
      })
    }

注册页

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  <div>
      <el-input v-model="userID" placeholder="用户名" class='input'></el-input>
   </div>
   <br>
   <div>
      <el-input v-model="password" placeholder="密码" class='input' type='password'></el-input>
   </div>
   <br>
   <div>
      <el-input v-model="mail" placeholder="邮箱" class='input'></el-input>
   </div>
   <br>
   <div>
    <el-button type="primary" @click='clickJoin()'>注册</el-button>
  </div>
  </div>
</template>

clickJoin: function () {
      var that = this
      this.$axios.request({
        url: 'http://localhost:8081/user/register',
        method: 'Post',
        data: JSON.stringify({
          Username: this.userID,
          Password: this.password
        }),
        responseType: 'json'
      }).then(function (response) {
        console.log(response.data)
        if (response.data.ok) {
          that.$store.commit('saveToken', {
            username: that.userID,
            token: response.data.ok
          })
          that.$router.push('/')
        } else {
          alert(response.data.error)
        }
      })
    }

详情页

<template>
  <div class="main">
    <div class = "title">
      <h2>{{ article.title }}</h2>
    </div>
    <div class = "extra">
      <div class="date">{{article.date}}</div>
      <div class="author">{{article.username}}</div>
    </div>
    <div class = "content" v-html="article.content"></div>
    <div class = "comments">
      <div class="addComment">
        <el-input v-model="commentadd" class='inputClass'></el-input>
        <el-button type="primary" size="mini" @click="DoComment()">评论</el-button>
      </div>
      <ul>
        <li v-for="item in article.comments" :key="item">
          <div class="header">
            <div class="author">{{item.user}}</div>
          </div>
          <div class = "comment">{{item.content}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

init: function () {
      var that = this
      var nid = this.$route.params.id// 获取id
      this.$axios.request({
        url: 'http://localhost:8081/article/' + nid,
        method: 'GET',
        responseType: 'json'
      }).then(function (response) {
        console.log(response.data)
        that.article = response.data.ok
      })
    }