first commit

历届学生/苏琪/2019-06-25/vue/src/App.vue

@@ -0,0 +1,25 @@
+<template>
+  <div id="app">
+    <!-- <ul>
+      <li>
+        <router-link to="/">首页</router-link>
+      </li>
+      <li>
+        <router-link to="/about">关于我</router-link>
+      </li>
+    </ul> -->
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<style>
+.router-link-exact-active {
+  color: red;
+}
+</style>

历届学生/苏琪/2019-06-25/vue/src/components/about.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="about">
+    <van-nav-bar
+      title="标题"
+      left-text="返回"
+      right-text="按钮"
+      left-arrow
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+    />
+
+
+    <div class="content">
+      <form action="/">
+        <van-search
+          v-model="Search"
+          placeholder="请输入搜索分类名"
+          show-action
+          @search="onSearch"
+          @cancel="onCancel"
+        />
+      </form>
+
+
+      <van-card
+        v-for="(item,index) in listData"
+        :key="index"
+       
+        :price="item.category"
+        :desc="item.title"
+        currency=""
+        :title="item.title"
+        :thumb="item.thumbnail_pic_s"
+      />
+
+    </div>
+
+
+    <van-tabbar v-model="active">
+      <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
+      <van-tabbar-item replace to="/about" icon="search">我的</van-tabbar-item>
+      <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
+      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
+    </van-tabbar>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      Search: null,
+      active: 0,
+      about: '关于我页面',
+      listData: []
+    }
+  },
+  created() {
+    
+  },
+  methods: {
+    onClickLeft () {
+      this.$toast('返回')
+    },
+    onCancel () {
+      this.Search = null
+      this.$toast('取消')
+    },
+    onSearch () {
+      this.getData()
+    },
+    onClickRight () {
+      this.$toast('按钮')
+    },
+    async getData () {
+      let data = await this.http.get({
+        url: '/class',
+        data: {
+          type: this.Search
+        }
+      })
+      this.listData = data
+      console.log(this.listData)
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

历届学生/苏琪/2019-06-25/vue/src/components/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="hello">
+    <input type="text" placeholder="请输入备忘内容" v-model="UserInput">
+    <button @click="Submit">提交</button>
+    <ul v-if="ListArr.length != 0">
+      <li v-for="(item,index) in ListArr" :key="index">
+        {{ index + 1 }}: {{ item }}
+        <span @click="deleteItem(index)">  x</span>
+      </li>
+    </ul>
+    <div v-else>
+      没有数据...
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  data () {
+    return {
+      UserInput: null,
+      ListArr: []
+    }
+  },
+  created () {
+    if (localStorage.getItem('note') != null) {
+      this.ListArr = JSON.parse(localStorage.getItem('note'))
+    }
+  },
+  methods: {
+    Submit () {
+      this.ListArr.push(this.UserInput)
+      this.UserInput = null
+      localStorage.setItem('note', JSON.stringify(this.ListArr))
+    },
+    deleteItem (index) {
+      this.ListArr.splice(index, 1)
+      localStorage.setItem('note', JSON.stringify(this.ListArr))
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

历届学生/苏琪/2019-06-25/vue/src/http/index.js

@@ -0,0 +1,52 @@
+import axios from "axios"
+import { Toast } from 'vant'
+import Vue from 'vue'
+
+Vue.use(Toast);
+axios.defaults.baseURL = 'http://127.0.0.1:3000';
+
+// 添加请求拦截器
+axios.interceptors.request.use(function (config) {
+  Toast.loading({
+    mask: true,
+    message: '请求数据...'
+  });
+  return config;
+}, function (error) {
+  // 对请求错误做些什么
+  return Promise.reject(error);
+});
+
+// 添加响应拦截器
+axios.interceptors.response.use(function (response) {
+  // 对响应数据做点什么
+  Toast.clear();
+  switch (response.data.error_code) {
+    case 0 :
+      return response.data.result.data;
+      break;
+    default:
+      Toast.fail('网络请求失败');
+      break;
+  }
+}, function (error) {
+  // 对响应错误做点什么
+  return Promise.reject(error);
+});
+
+
+export default {
+  get (params) {
+   return new Promise(function(resolve,reject){
+    axios.get(params.url, {
+      params: params.data
+    })
+    .then(function (response) {
+      resolve(response);
+    })
+    .catch(function (error) {
+      reject(error);
+    });
+   })
+  }
+}

历届学生/苏琪/2019-06-25/vue/src/main.js

@@ -0,0 +1,25 @@
+// 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 Vant from 'vant'
+import 'vant/lib/index.css'
+
+import http from "./http"
+
+Vue.prototype.http = http
+
+Vue.use(Vant)
+
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})

历届学生/苏琪/2019-06-25/vue/src/router/index.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Index from '@/components/index'
+import About from '@/components/about'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'index',
+      component: Index
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: About
+    }
+  ]
+})