[ADDED] administrator publish artical

app/artical.vue

@@ -0,0 +1,158 @@
+<template>
+ <div id="artical">
+ <div class="container">
+ <nav-self></nav-self>
+ <div class="input-group">
+ <select class="custom-select" id="inputGroupSelect04" v-model="type.typeValue">
+ <option value="" selected>选择感兴趣的文章类型</option>
+ <option value="国内山河">国内山河</option>
+ <option value="国外风光">国外风光</option>
+ <option value="历史古迹">历史古迹</option>
+ <option value="浪漫圣地">浪漫圣地</option>
+ <option value="风格迥异">风格迥异</option>
+ </select>
+ <div class="input-group-append">
+ <button class="btn btn-success" type="button" @click="google()">搜索</button>
+ </div>
+ </div>
+ <div class="recommend">
+ <h1 class="text-center">全部文章</h1>
+ <div class="cardBar" v-if="isShow">
+ <div class="card" v-for="(item,index) in note"
+ :key="index" @click="jump(item)">
+ <img class="card-img-top"
+ :src="url + image"
+ alt="未上传图片">
+ <div class="card-body">
+ <p class="card-text">{{item.title}}</p>
+ <p class="card-text">
+ <span>{{item.type}}</span>
+ </p>
+ </div>
+ </div>
+ </div>
+ <nav v-if="isNav">
+ <ul class="pagination">
+ <li class="page-item"
+ v-for="(item, index) in container"
+ :key="index">
+ <span class="page-link" href="#"
+ @click="number = index;changePage()">{{index+1}}</span>
+ </li>
+ </ul>
+ </nav>
+ <p class="p" v-if="!isShow">没有合适的文章存在</p>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import NavSelf from './component/nav.vue';
+import axios from 'axios';
+import {pagenator} from './mixin';
+
+export default {
+ data() {
+ return {
+ note: [],
+ moreNote: [],
+ url: 'http://localhost:4000/',
+ image: '1.jpg',
+ isShow: true,
+ isNav: true,
+ type: {
+ typeValue: ''
+ },
+ container: [],
+ number: 0
+ };
+ },
+ beforeCreate() {
+ axios.get('api/main/artical').then(res => {
+ if (res.data.lenght !== 0) {
+ const {container, note} = pagenator(8, res.data, this.container, this.note);
+
+ this.container = container;
+ this.note = note;
+ } else {
+ this.isShow = false;
+ }
+
+ });
+ },
+ methods: {
+ google() {
+ axios.post('api/main/artical', this.type).then(res => {
+ if (res.data.lenght !== 0 || res.data.lenght !== undefined) {
+ this.note = res.data;
+ this.isNav = false;
+ } else {
+ this.isShow = false;
+ }
+ })
+ },
+ changePage() {
+ this.note = this.container[this.number];
+ },
+ jump(item) {
+ this.$router.push({
+ path: '/note/detail',
+ query: {
+ note: item
+ }
+ });
+ }
+ },
+ components: {
+ NavSelf
+ }
+}
+</script>
+
+<style>
+#artical .container {
+ margin:0;
+ padding:0;
+ width:100%;
+ min-width:1340px;
+}
+#artical .input-group {
+ width:40%;
+ margin:30px auto;
+}
+#artical .input-group input{
+ border-color: green;
+}
+#artical .recommend{
+ width:100%;
+ padding:40px 5%;
+}
+#artical .recommend .p{
+ text-align: center;
+ font-size: 40px;
+ font-weight: bold;
+ margin-top: 20px;
+}
+#artical .recommend .btn {
+ margin: 0 auto;
+ display: block;
+}
+#artical .recommend .cardBar {
+ height:600px;
+}
+#artical h1{
+ color:rgb(122,122,122);
+ margin-bottom:30px;
+}
+#artical .card{
+ width:23%;
+ margin:1%;
+ float: left;
+}
+#artical .recommend .card img{
+ width:100%;
+ height:200px;
+ background-color: gray;
+}
+</style>

app/component/nav.vue

@@ -28,6 +28,9 @@
  <li class="nav-item dropdown">
  <router-link class="nav-link" to="/topic">话题中心</router-link>
  </li>
+ <li class="nav-item dropdown">
+ <router-link class="nav-link" to="/artical">文章中心</router-link>
+ </li>
  <!-- <li class="nav-item dropdown">
  <router-link class="nav-link" to="#">人工服务</router-link>
  </li>

app/component/personalpage/administrator-manage-artical.vue

@@ -0,0 +1,82 @@
+<template>
+ <div>
+ <table class="table" v-if="artical !== null">
+ <thead>
+ <tr>
+ <th scope="col">标题</th>
+ <th scope="col">类型</th>
+ <th scope="col">创建时间</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, index) in artical"
+ :key="index">
+ <td>{{item.title}}</td>
+ <td>{{item.type}}</td>
+ <td>{{item.createdAt}}</td>
+ <td>
+ <button class="btn btn-primary"
+ @click="deleteArtical(item)">删除</button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <nav>
+ <ul class="pagination">
+ <li class="page-item"
+ v-for="(item, index) in container"
+ :key="index">
+ <span class="page-link" href="#"
+ @click="number = index;changePage()">{{index+1}}</span>
+ </li>
+ </ul>
+ </nav>
+ <h1 v-if="artical === null">{{tip}}</h1>
+ <p class="alert alert-warning" v-if="isPrompt">{{prompt}}</p>
+ </div>
+</template>
+
+<script>
+import axios from 'axios';
+import {pagenator} from '../../mixin';
+
+export default {
+ data() {
+ return {
+ artical: null,
+ tip: '',
+ container: [],
+ isPrompt: false,
+ prompt: '',
+ number: 0
+ }
+ },
+ beforeCreate() {
+ return axios.get('/api/personal/administrator/manage/artical').then((res) => {
+
+ if (!res.data.information) {
+ const {container, note} = pagenator(5, res.data, this.container, this.note);
+
+ this.container = container;
+ this.artical = note;
+
+ } else {
+ this.tip = res.data.information;
+ }
+ });
+ },
+ methods: {
+ deleteArtical(item) {
+ axios.put('/api/personal/administrator/delete/artical', item).then(res => {
+ if (res.data.prompt) {
+ this.isPrompt = true;
+ this.prompt = res.data.prompt;
+ }
+ });
+ },
+ changePage() {
+ this.artical = this.container[this.number];
+ }
+ }
+}
+</script>

app/component/personalpage/administrator-publish-artical.vue

@@ -0,0 +1,83 @@
+<template>
+ <form>
+ <div class="form-group row">
+ <label for="title" class="col-sm-2 col-form-label label">
+ 标题：
+ </label>
+ <input id="title" class="form-control 
+ col-sm-6" type="text"
+ v-model="artical.title"
+ placeholder="输入四到十个汉字" @focus="hidden()" required/>
+ </div>
+ <div class="form-group row">
+ <label for="type" class="col-sm-2 col-form-label label">
+ 游记类型：
+ </label>
+ <select id="type" class="custom-select col-sm-6"
+ v-model="artical.type" @focus="hidden()">
+ <option value="国内山河">国内山河</option>
+ <option value="国外风光">国外风光</option>
+ <option value="历史古迹">历史古迹</option>
+ <option value="浪漫圣地">浪漫圣地</option>
+ <option value="风格迥异">风格迥异</option>
+ </select>
+ </div>
+ <div class="form-group row">
+ <label for="content" class="col-sm-2 col-form-label label">
+ 内容：
+ </label>
+ <textarea id="content" class="form-control 
+ col-sm-6" rows="10" 
+ v-model="artical.content" @focus="hidden()" required>
+ </textarea>
+ </div>
+ <div class="form-group row">
+ <div class="col-sm-3"></div>
+ <button type="submit" class="col-sm-1 btn btn-primary" @click="submit(artical)">提交</button>
+ <div class="col-sm-1"></div>
+ <button type="reset" class="col-sm-1 btn btn-primary">重置</button>
+ </div>
+ <p class="alert alert-warning" v-if="isPrompt">{{prompt}}</p>
+ </form>
+
+</template>
+
+<script>
+import axios from 'axios';
+import {
+ TITLE,
+ validate
+} from '../../mixin';
+
+export default {
+ data() {
+ return {
+ artical:{
+ title: '',
+ content: '',
+ type: ''
+ },
+ isPrompt: false,
+ prompt: ''
+ }
+ },
+ methods: {
+ submit(artical) {
+ if (!validate(artical.title, TITLE)) {
+ this.isPrompt = true;
+ this.prompt = '输入标题格式不正确';
+
+ return;
+ }
+
+ axios.post('api/personal/administrator/publish/artical', artical).then(res => {
+ this.isPrompt = true;
+ this.prompt = res.data.information;
+ });
+ },
+ hidden() {
+ this.isPrompt = false;
+ }
+ }
+}
+</script>

app/component/personalpage/tourist-manage-tranvel.vue

@@ -62,6 +62,8 @@ export default {
  this.container = container;
  this.note = note;
 
+ } else {
+ this.tip = res.data.information;
  }
  });
  },