文章获取接口调通

.gitignore

@@ -15,3 +15,4 @@ selenium-debug.log
 *.ntvs*
 *.njsproj
 *.sln
+个人博客原型.rp

blogExpress/app.js

@@ -19,7 +19,7 @@ app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));
 
-app.use('/user', indexRouter);
+app.use('/article', indexRouter);
 // app.use('/users', usersRouter);
 
 // catch 404 and forward to error handler

blogExpress/bin/www

@@ -12,7 +12,7 @@ var http = require('http');
  * Get port from environment and store in Express.
  */
 
-var port = normalizePort(process.env.PORT || '3000');
+var port = normalizePort(process.env.PORT || '3003');
 app.set('port', port);
 
 /**

blogExpress/routes/Articlesql.js

@@ -0,0 +1,12 @@
+var table = "article";
+var Articlesql = {
+  insert: "INSERT INTO " + table + "(title,content,publishTime) VALUES(?,?,?)",
+  queryAll:
+    "SELECT id,title,publishTime,modifyTime,commentNum,category FROM " +
+    table +
+    "",
+  getUserById: "SELECT * FROM " + table + " WHERE title = ? ",
+  update: "update " + table + " set name=? where name=?",
+  delete: "delete from " + table + " where id=?"
+};
+module.exports = Articlesql;

blogExpress/routes/index.js

@@ -1,53 +1,75 @@
-var express = require('express');
+var express = require("express");
 var router = express.Router();
-var mysql = require('mysql');
-var dbConfig = require('./DBconfig')
-var userSQL = require('./Usersql')
+var mysql = require("mysql");
+var dbConfig = require("./DBconfig");
+var Articlesql = require("./Articlesql");
+var pageId = 0
 
 // 使用DBConfig.js的配置信息创建一个MySQL连接池
 var pool = mysql.createPool(dbConfig.mysql);
 // 响应一个JSON数据
-var responseJSON = function (res, ret) {
-  if (typeof ret === 'undefined') {
+var responseJSON = function(res, ret) {
+  if (typeof ret === "undefined") {
     res.json({
-      code: '-200', msg: '操作失败'
+      code: "-200",
+      msg: "操作失败"
     });
   } else {
     res.json(ret);
   }
 };
 
+// 添加文章
+router.get("/addArticle", function(req, res, next) {
+  // 从连接池获取连接
+  pool.getConnection(function(err, connection) {
+    // 获取前台页面传过来的参数
+    var param = req.query || req.params;
+    // 建立连接 增加一个用户信息
+    console.log(param);
+    console.log(err);
+    var currentTime = new Date().getTime();
+    console.log(currentTime);
+    connection.query(
+      Articlesql.insert,
+      [param.title, param.content, currentTime],
+      function(err, result) {
+        if (result) {
+          result = {
+            code: 0,
+            msg: "新增文章成功",
+            id: result.insertId
+          };
+        }
+        // console.log(res)
+
+        // 以json形式，把操作结果返回给前台页面
+        responseJSON(res, result);
 
-// 添加用户
-router.get('/addUser', function (req, res, next) {
-  // 从连接池获取连接 
-  pool.getConnection(function (err, connection) {
-    // 获取前台页面传过来的参数  
+        // 释放连接
+        connection.release();
+      }
+    );
+  });
+});
+// 查询文章标题列表
+router.get("/queryTitlelist", function(req, res, next) {
+  pool.getConnection((err, connection) => {
     var param = req.query || req.params;
-    // 建立连接 增加一个用户信息 
-    console.log(param)
-    console.log(err)
-    connection.query(userSQL.delete, [param.id], function (err, result) {
-      console.log(err)
+    connection.query(Articlesql.queryAll, function(err, result) {
+      console.log(result);
       if (result) {
-        result = {
-          code: 200,
-          msg: '新增成功'
-        };
+        result = { code: 0, msg: "获取文章列表成功", data: pageId++ };
       }
       // console.log(res)
 
-      // 以json形式，把操作结果返回给前台页面     
+      // 以json形式，把操作结果返回给前台页面
       responseJSON(res, result);
 
-      // 释放连接  
+      // 释放连接
       connection.release();
-
     });
   });
 });
 
-
 module.exports = router;
-
-

code/package.json

@@ -12,6 +12,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "element-ui": "^2.1.0",
     "lodash": "^4.17.5",
     "marked": "^0.3.12",

code/src/App.vue

@@ -3,9 +3,10 @@
     <el-container class="pageWrap">
       <el-header height='70px' class="pageHeader">
         <div class="blogTitle">monologueH's world!</div>
-        <el-menu :default-active="activeIndex" class="blogNav" mode="horizontal" @select="handleSelect">
-          <el-menu-item index="1">文章列表</el-menu-item>
-          <el-menu-item index="2">个人随笔</el-menu-item>
+        <el-menu :default-active="activeIndex" class="blogNav" mode="horizontal" @select="handleSelect" :router=true>
+          <el-menu-item index="/">首页</el-menu-item>
+          <el-menu-item index="articleList">文章列表</el-menu-item>
+          <el-menu-item index="marked">个人随笔</el-menu-item>
           <!-- <el-submenu index="2">
             <template slot="title">我的工作台</template>
             <el-menu-item index="2-1">选项1</el-menu-item>
@@ -16,10 +17,10 @@
           <el-menu-item index="4">关于</el-menu-item>
         </el-menu>
       </el-header>
-      <transition name="el-fade-in-linear">
+      <!-- <transition name="el-fade-in-linear"> -->
         <router-view class="transition-box"></router-view>
 
-      </transition>
+      <!-- </transition> -->
 
 
     </el-container>
@@ -37,6 +38,7 @@ export default {
   methods: {
     handleSelect(key, keyPath) {
       console.log(key, keyPath);
+      
     }
   }
 };
@@ -75,7 +77,7 @@ a{
       background-color: #333;
       > .el-menu-item,.el-submenu__title {
         text-align: center;
-        width: 150px;
+        width: 120px;
         height: 70px;
         line-height: 70px;
         color: #fff;

code/src/main.js

@@ -1,17 +1,23 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
-import App from './App'
 import router from './router'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import './css/Tangerine.css'
 import Sjld from './components/sjld/index.js'
 import _ from 'lodash'
 import 'marked'
+import Axios from 'axios'
+import {request} from "./utils/request";
+import base from './utils/base'
+import App from './App'
+
 
 Vue.use(ElementUI,{size:'medium'})
 Vue.use(Sjld)
+Vue.use(base)
+Vue.prototype.$axios = Axios;
 
 Vue.config.productionTip = false
 

code/src/pages/articleList.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-container>
+    <el-main class="articleList">
+        123
+        <el-button @click="getTitlelist">默认按钮</el-button>
+    </el-main>
+    <el-footer>
+        123
+    </el-footer>
+  </el-container>
+</template>
+
+<script>
+import {request} from "../utils/request";
+export default {
+  name: "articleList",
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    getTitlelist(){
+      console.log(123)
+      request.queryTitleList().then((res)=>{
+        console.log(res.data)
+      })
+    }
+  }
+};
+</script>
+
+<style scoped lang='less'>
+
+  .articles{
+      background-color: #ccc;
+      height: 100%;
+  }
+</style>

code/src/pages/blogArticle.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="blogArticle">
-    123
-    <sjld :citys="citys" :sheng="sheng" @change="change"></sjld>
+
   </div>
 </template>
 
@@ -10,9 +9,7 @@ export default {
   name: "blogArticle",
   data() {
     return {
-      isCollapse: true,
-      citys:[{name:1},{name:2},{name:3}],
-      sheng:[{name:1},{name:2},{name:3}]
+      
     };
   },
   methods: {
@@ -22,6 +19,6 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style scoped lang='less'>
 
 </style>