first commit

2 years ago · b336539c1b
commit b336539c1b
16 changed files with 752 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
 .DS_Store
 node_modules
 /dist
 package-lock.json
 # local env files
 .env.local
 .env.*.local
 # Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 # Editor directories and files
 .idea
 .vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/README.md
+++ b/README.md
@ -0,0 +1,24 @@
 # shop-tour-front
 ## Project setup
 ```
 npm install
 ```
 ### Compiles and hot-reloads for development
 ```
 npm run serve
 ```
 ### Compiles and minifies for production
 ```
 npm run build
 ```
 ### Lints and fixes files
 ```
 npm run lint
 ```
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,12 @@
 module.exports = {
  // vuecli3 不需要配置transform-vue-jsx
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry',
        polyfills: ['es6.promise', 'es6.symbol']
      }
    ]
  ]
 }
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,19 @@
 {
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
 }
--- a/package.json
+++ b/package.json
@ -0,0 +1,52 @@
 {
  "name": "shop-tour-front",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "amfe-flexible": "^2.2.1",
    "ant-design-vue": "^1.7.8",
    "axios": "^1.1.2",
    "core-js": "^3.8.3",
    "es6-promise": "^4.2.8",
    "vue": "^2.6.14",
    "vue-infinite-scroll": "^2.0.2",
    "vue-router": "^3.5.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "babel-plugin-import": "^1.13.5",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "postcss-pxtorem": "^6.0.0",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,10 @@
 module.exports = {
  plugins: {
      autoprefixer: {},
      // flexible配置
      // "postcss-pxtorem": {
      //     "rootValue": 40, // 设计稿宽度的1/10
      //     "propList": ["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
      // }
  }
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
 <!DOCTYPE html>
 <html lang="">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>电力工程现行法律法规标准索引</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but Demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,81 @@
 <template>
  <div id="app">
    <router-view />
  </div>
 </template>
 <script>
 export default {
  name: 'App',
 }
 </script>
 <style>
 /* 把我们所有标签的内外边距清零 */
 * {
    margin: 0;
    padding: 0
 }
 /* em 和 i 斜体的文字不倾斜 */
 em,
 i {
    font-style: normal
 }
 /* 去掉li 的小圆点 */
 li {
    list-style: none
 }
 img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
 }
 button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
 }
   /* 改变a链接的默认样式,颜色和下划线 */
 a {
    color: #666;
    text-decoration: none
 }
 a:hover {
    color: #c81623
 }
 button,
 input {
    /* "5B8B4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5B8B4F53", sans-serif
 }
 body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5B8B4F53", sans-serif;
    color: #666
 }
 .hide,
 .none {
    display: none
 }
 /* 清除浮动 */
 .clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
 }
 .clearfix {
    zoom: 1
 }
 </style>
--- a/src/axios.js
+++ b/src/axios.js
@ -0,0 +1,128 @@
 import axios from 'axios'
 // 请求url
 axios.defaults.baseURL = 'http://47.92.229.12:8888'
 // axios.defaults.baseURL = 'http://visitor.emaylearningsh.com/api'
 axios.defaults.timeout = 10000
 let cancel, promiseArr = {}
 const CancelToken = axios.CancelToken;
 // POST传参序列化
 axios.interceptors.request.use((config) => {
  // 发起请求时，取消掉当前正在进行的相同请求
  if (promiseArr[config.url]) {
    promiseArr[config.url]('操作取消')
    promiseArr[config.url] = cancel
  } else {
    promiseArr[config.url] = cancel
  }
  // token
  const token = JSON.parse(sessionStorage.getItem('token'))
  if (token) {
    config.headers.Authorization = token;
  }
  return config;
 }, (error) => {
  return Promise.reject(error);
 });
 //返回状态判断
 axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  if (response.data.retcode === 201) {
    sessionStorage.removeItem('token');
    router.replace({
      path: 'login',
      query: { redirect: router.currentRoute.fullPath } //登录成功后跳入浏览的当前页面
    })
  }
  return response;
 }, function (error) {
  // 对响应错误做点什么
  if (error && error.response) {
    switch (error.response.status) {
      case 400:
        error.message = '错误请求'
        break;
      case 401:
        // 这里写清除token的代码
        sessionStorage.removeItem('token');
        router.replace({
          path: 'login',
          query: { redirect: router.currentRoute.fullPath } //登录成功后跳入浏览的当前页面
        })
        error.message = '未授权，请重新登录'
        break;
      case 403:
        error.message = '拒绝访问'
        break;
      case 404:
        error.message = '请求错误,未找到该资源'
        break;
      case 405:
        error.message = '请求方法未允许'
        break;
      case 408:
        error.message = '请求超时'
        break;
      case 500:
        error.message = '服务器端出错'
        break;
      case 501:
        error.message = '网络未实现'
        break;
      case 502:
        error.message = '网络错误'
        break;
      case 503:
        error.message = '服务不可用'
        break;
      case 504:
        error.message = '网络超时'
        break;
      case 505:
        error.message = 'http版本不支持该请求'
        break;
      default:
        error.message = `连接错误${error.response.status}`
    }
  } else {
    error.message = "连接到服务器失败"
  }
  //Message.error({message: error.message});
  return Promise.resolve(error.response)
 });
 //export default axios;
 export default {
  //get请求
  get(url, param) {
    return new Promise((resolve) => {
      axios({
        method: 'get',
        url,
        params: param,
        cancelToken: new CancelToken(c => {
          cancel = c
        })
      }).then(res => {
        resolve(res)
      })
    })
  },
  //post请求
  post(url, param) {
    return new Promise((resolve) => {
      axios({
        method: 'post',
        url,
        data: param,
        cancelToken: new CancelToken(c => {
          cancel = c
        })
      }).then(res => {
        resolve(res)
      })
    })
  }
 }
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,27 @@
 import '@babel/polyfill'
 import Vue from 'vue'
 import router from './router'
 import App from './App.vue'
 import axios from "./axios"
 import 'ant-design-vue/dist/antd.css';
 import { Input, List, Spin, message, Button, Form } from 'ant-design-vue';
 Vue.use(Input);
 Vue.use(Button);
 Vue.use(List);
 Vue.use(Spin);
 Vue.use(Form)
 import 'amfe-flexible'
 Vue.config.productionTip = false
 Vue.prototype.$https = axios;
 Vue.prototype.$message = message;
 Vue.prototype.$form = Form;
 new Vue({
  el: '#app',
  router,
  // 注册仓库：
  render: h => h(App),
 }).$mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,66 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Home from '@/views/Home'
 import Login from '@/views/Login'
 import Detail from '@/views/Detail'
 Vue.use(Router)
 const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login,
    meta: {
      title: '登录',
    }
  },
  {
    path: '/',
    name: 'MyHome',
    component: Home,
    meta: {
      title: '电力工程现行法律法规标准索引',
      requireAuth: true,
    }
  },
  {
    path: '/detail',
    name: 'MyDetail',
    component: Detail,
    meta: {
      title: '电力工程现行法律法规标准索引',
      requireAuth: true,
    }
  },
 ];
 const router = new Router({
  routes
 });
 router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  if (to.meta.requireAuth) { // 如果路由项需要权限校验
    /*
      从Vuex拿出token码，说明已登陆
     （前端的token可伪造，所以这并不是完全靠谱，后面继续说）
    */
    if (JSON.parse(sessionStorage.getItem('token'))) {
      next() // 正常跳转页面
    } else {
      let query = { returnUrl: to.path };
      next({
        path: '/login',
        query: query
        /* 将跳转的路由地址作为参数带给登陆页，登录成功后跳转回该页面 */
      })
    }
  } else { // 如果不需要权限校验，直接进入路由页面
    next();
  }
 })
 export default router;
--- a/src/views/Detail.vue
+++ b/src/views/Detail.vue
@ -0,0 +1,70 @@
 <template>
  <div class="detail">
    <div class="top">
      <p>类型: {{info.categoryName}}</p>
      <p>级别: {{info.levelName}}</p>
      <p>文号版本: {{info.version}}</p>
      <p>实施日期: {{info.implementationDate}}</p>
      <p>状态: {{info.currentStatus == 1 ? '现行' : '废止'}}</p>
      <p>内容介绍:</p>
    </div>
    <div class="content">
      <div v-html="info.content" class="inner-html"></div>
    </div>
  </div>
 </template>
 <script>
 export default {
  name: "MyDtail",
  data() {
    // 这里存放数据
    return {
      info: {
        categoryName: '',
        levelName: '',
        version: '',
        implementationDate: '',
        currentStatus: '',
      }
    };
  },
  mounted() {
    this.$https.post("/api/article/article-detail-by-id", { id: this.$route.query.id }).then(res => {
      if (res && res.data && res.data.retcode) {
        this.info = res.data.data
      }
    })
  },
 };
 </script>
 <style scoped>
 .top {
  padding: 10px;
  font-size: 18px;
 }
 .top p {
  margin: 0;
  padding-bottom: 10px;
 }
 .content {
  width: 100%;
  overflow: hidden;
 }
 .inner-html {
  padding: 10px;
  max-width: 100%;
  font-size: 18px;
 }
 .inner-html >>> p {
  margin: 0;
 }
 .inner-html >>> table, .inner-html >>> th, .inner-html >>> td {  
  border: 1px solid black;  
  border-collapse: collapse;  
 }  
 </style>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -0,0 +1,120 @@
 <template>
  <div class="home">
    <div class="search">
      <a-input-search
        placeholder="请输入关键字，标准名称，文号版本"
        enter-button="查询"
        size="large"
        @search="onSearch"
      />
    </div>
    <div
      v-infinite-scroll="handleInfiniteOnLoad"
      class="demo-infinite-container"
      :infinite-scroll-disabled="busy"
      :infinite-scroll-distance="10"
    >
      <a-list :data-source="data">
        <a-list-item slot="renderItem" slot-scope="item, index" @click="goDetail(item.id)">
          <a-list-item-meta :description="item.version">
            <h3 slot="title">{{ item.title }}</h3>
          </a-list-item-meta>
          <div>{{item.currentStatus === 1 ? '现行' : '废止'}}</div>
        </a-list-item>
        <div v-if="loading && !busy" class="demo-loading-container">
          <a-spin />
        </div>
      </a-list>
    </div>
  </div>
 </template>
 <script>
 import infiniteScroll from 'vue-infinite-scroll';
 export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "MyHome",
  directives: { infiniteScroll },
  data() {
    // 这里存放数据
    return {
      data: [],
      loading: false,
      busy: false,
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 20,
        param: ''
      }
    };
  },
  beforeMount() {
    this.fetchData(res => {
      this.data = res.list;
    });
  },
  methods: {
    goDetail(id) {
      console.log(id)
      this.$router.push('/detail?id='+id)
    },
    onSearch(value) {
      this.params = {
        pageNum: 1,
        pageSize: 20,
        param: value
      };
      this.data = []
      this.loading = true;
      this.fetchData(res => {
        this.data = res.list;
        this.loading = false;
      });
    },
    fetchData(callback) {
      this.$https.post("/api/article/article-list-by-condition", this.params).then(res => {
        if (res && res.data && res.data.retcode) {
          this.total = res.data.data.total || 0
          callback(res.data.data);
        }
      })
    },
    handleInfiniteOnLoad() {
      const data = this.data;
      this.loading = true;
      if (data.length > this.total) {
        this.$message.warning('已加载完成');
        this.busy = true;
        this.loading = false;
        return;
      }
      this.fetchData(res => {
        this.data = data.concat(res.list);
        this.loading = false;
      });
    },
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
 };
 </script>
 <style scoped>
 .search {
  padding: 10px;
 }
 .demo-infinite-container {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: auto;
  padding: 8px 24px;
  height: calc(100vh - 100px);
 }
 .demo-loading-container {
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
 }
 </style>
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@ -0,0 +1,89 @@
 <template>  
  <div class="login-page">  
    <div class="login-container">  
      <h1>登录</h1>  
      <div class="form">  
        <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
          <a-form-item label="用户名">
            <a-input
              v-decorator="['username', { rules: [{ required: true, message: '请输入用户名' }] }]"
            />
          </a-form-item>
          <a-form-item label="密码">
            <a-input-password
              v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }] }]"
            />
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 12 }">
            <a-button type="primary" html-type="submit" block>
              登录
            </a-button>
          </a-form-item>
        </a-form>
      </div>  
    </div>  
  </div>  
 </template>  
 <script>
 import { message } from 'ant-design-vue';
 export default {  
  data() {  
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
    };  
  },
  mounted() {
    if (JSON.parse(sessionStorage.getItem("token"))) {
      this.$router.replace({ path: "/" });
    }
  },
  methods: {  
    handleSubmit(e) {  
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$https.post("/api/login", {userNo: values.username, password: values.password}).then(res => {
            if (res && res.data && res.data.retcode) {
              sessionStorage.setItem("token", JSON.stringify(res.data.data));
              if (this.$route.query.returnUrl) {
                this.$router.push({ path: this.$route.query.returnUrl, query: this.$route.query });
              } else {
                this.$router.push({ path: "/" });
              }
            } else {
              message.error(res.data.retmsg)
            }
          })
        }
      });
    }  
  }  
 };  
 </script>  
 <style scoped>  
 .login-page {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  height: 100vh;  
 }  
 .login-container {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  width: 300px;  
  padding: 20px;  
  border: 1px solid #ccc;  
  border-radius: 5px;  
 }  
 h1 {  
  margin-top: 0;  
  font-size: 22px;
 }
 </style>
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,13 @@
 // const { defineConfig } = require('@vue/cli-service')
 // module.exports = defineConfig({
 //   transpileDependencies: true
 // })
 module.exports = {
  publicPath: '/',
  // 关闭打包生成map文件
  productionSourceMap: false,
  // 关闭ESLINT校验工具
  lintOnSave: false,
  css: {},
  configureWebpack: config => { config.entry.app = ["@babel/polyfill", "./src/main.js"]; },
 }