新疆项目基础

83ed035d · 白狗汪汪汪 · 2f8c7e02 · 83ed035d · 83ed035d · 83ed035d
Commit 83ed035d authored Mar 27, 2019 by 白狗汪汪汪
23 changed files
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -89,7 +89,9 @@ module.exports = {
  plugins: [
    new VueLoaderPlugin(),
    new webpack.ProvidePlugin({
-      _: 'lodash'
+      _: 'lodash',
+      // 配置全局函数
+      $utils: [resolve(`src/utils.ts`), 'default'],
    })
-  ]
+  ],
 }
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -3,5 +3,7 @@ const merge = require('webpack-merge')
 const prodEnv = require('./prod.env')
 module.exports = merge(prodEnv, {
-  NODE_ENV: '"development"'
+  NODE_ENV: '"development"',
+  //生产环境  转代理
+  API_ROOT: '"/api"'
 })
--- a/config/index.js
+++ b/config/index.js
@@ -11,7 +11,7 @@ module.exports = {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: './',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
@@ -31,7 +31,15 @@ module.exports = {
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
-    proxyTable: {},
+    // 在
+    proxyTable: {
+      '/api': {
+        target: 'http://10.197.236.151:3000/mock/27',
+        pathRewrite: {
+          '^/api': ''
+        }
+      }
+    },
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)

--- a/config/prod.env.js
+++ b/config/prod.env.js
 'use strict'
 module.exports = {
-  NODE_ENV: '"production"'
+  NODE_ENV: '"production"',
+  API_ROOT: '"http://222.85.150.247:10011/dmsmp"'
 }
--- a/config/test.env.js
+++ b/config/test.env.js
@@ -3,5 +3,6 @@ const merge = require('webpack-merge')
 const devEnv = require('./dev.env')
 module.exports = merge(devEnv, {
-  NODE_ENV: '"testing"'
+  NODE_ENV: '"testing"',
+  API_ROOT: '"http://222.85.150.247:10011/dmsmp"'
 })
--- a/package.json
+++ b/package.json
 {
-  "name": "test2",
+  "name": "Front_end_project-template",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "白狗汪汪汪 <baifuyou94@163.com>",
@@ -18,9 +18,12 @@
  "dependencies": {
    "lodash": "^4.17.4",
    "vue": "^2.5.2",
+    "axios": "^0.18.0",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^6.0.0",
    "vue-router": "^3.0.1",
+    "echarts": "^4.2.0-rc.2",
+    "element-ui": "^2.4.9",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.0"
  },
@@ -30,17 +33,23 @@
    "babel-eslint": "^8.2.2",
    "babel-helper-vue-jsx-merge-props": "^2.0.2",
    "babel-loader": "^7.1.1",
+    "babel-plugin-istanbul": "^4.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
+    "chai": "^4.1.2",
    "chalk": "^2.0.1",
+    "chromedriver": "^2.27.2",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.28.0",
+    "cross-env": "^5.0.1",
+    "cross-spawn": "^5.0.1",
+    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
@@ -59,7 +68,7 @@
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^3.2.0",
    "http-proxy-middleware": "^0.17.3",
-    "cross-env": "^5.0.1",
+    "inject-loader": "^4.0.1",
    "karma": "^1.4.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
@@ -69,30 +78,30 @@
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.31",
    "karma-webpack": "^3.0.0",
+    "less": "^3.9.0",
+    "less-loader": "^4.1.0",
    "mocha": "^3.2.0",
-    "chai": "^4.1.2",
+    "nightwatch": "^0.9.12",
-    "sinon": "^4.0.0",
-    "sinon-chai": "^2.8.0",
-    "inject-loader": "^4.0.1",
-    "babel-plugin-istanbul": "^4.1.1",
-    "phantomjs-prebuilt": "^2.1.14",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
+    "phantomjs-prebuilt": "^2.1.14",
    "portfinder": "^1.0.13",
    "rimraf": "^2.6.0",
-    "nightwatch": "^0.9.12",
-    "chromedriver": "^2.27.2",
-    "cross-spawn": "^5.0.1",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
+    "sinon": "^4.0.0",
+    "sinon-chai": "^2.8.0",
+    "style-loader": "^0.23.1",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
    "ts-loader": "^4.4.2",
    "tslint": "^5.8.0",
    "tslint-config-standard": "^7.0.0",
    "tslint-loader": "^3.5.3",
-    "typescript-eslint-parser": "^14.0.0",
    "typescript": "^2.9.2",
+    "typescript-eslint-parser": "^14.0.0",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "url-loader": "^0.5.8",
    "vue-loader": "^15.2.4",

--- a/src/App.vue
+++ b/src/App.vue
@@ -8,10 +8,12 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
 @Component({
 })
 export default class App extends Vue {
+  created(){
+  }
 }
 </script>

--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
 <template>
  <div class="hello">
-    <h1>{{ msg }}</h1>
+    <h1 @click="changemMsg()">{{ msg }}</h1>
    <h2>vue-typescrip-starter</h2>
    <p>mixin 数据 ：{{ testMixinArg }}</p>
-    <p>store 数据 ：{{ info.data }}</p>
+    <p>store 数据 ：{{ info }}</p>
    <RC></RC>
+    <TestVuex></TestVuex>
  </div>
 </template>
@@ -12,23 +13,46 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
 import TestMixin from '../mixins/test-mixin'
-import { Getter } from 'vuex-class'
+import { State,
+        Getter,
+        Action,
+        Mutation,
+        namespace } from 'vuex-class'
+const test = namespace('test');
 // jsx组件
 import RC from '@/components/renderComponent.vue'
+// 测试组件
+import TestVuex from "./test/testVuex.vue"
 @Component({
  components: {
-    RC
+    TestVuex,
+    RC,
+    // 
  },
  mixins: [TestMixin]
 })
 export default class HelloWorld extends Vue<TestMixin> {
-  @Getter info
+  @test.Getter info
-  msg: string = 'Welcome to Your Vue-Typescript App'
+  msg: string = '信息'
+  /**
+     * changemMsg
+     */
+    changemMsg(x:number,y?:number):string{
+      let res =String(x+y);
+      return res;
+    }
  mounted () {
-    console.log('这是 _.assign({})', _.assign({}))
+    // console.log('这是 _.assign({})', _.assign({}))
-    console.log('from mixin', this.testMixinArg)
+    // console.log($utils,'32323')
+    // console.log('from mixin', this.testMixinArg)
+    // console.log(this.msg)
+    // console.log(this.changemMsg(5,3));
+  }
+  created(){
+    // console.log('bvvv')
  }
 }
 </script>

--- a/src/components/test/test.less
+++ b/src/components/test/test.less
+.hello2{
+    display: block;
+    position: relative;
+    .text{
+        font-size: 25px;
+    }
+}
\ No newline at end of file
--- a/src/components/test/test.ts
+++ b/src/components/test/test.ts
+// require("./test.less");
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import { State,
+        Getter,
+        Action,
+        Mutation,
+        namespace } from 'vuex-class';
+const test = namespace('test');
+@Component({})
+export default class Test extends Vue {
+  @test.Getter info ;
+  @test.Action('changeInfos') changeInfos;
+  user_Info:string='';
+   changeInfo() {
+     if(this.user_Info===''){
+         this.$message('请输入新的值哇哈哈哈');
+         return;
+     }
+    this.changeInfos(this.user_Info)
+  }
+  mounted () {
+    let data = {
+      userCode:'root',
+      userPwd:'25d55ad283aa400af464c76d713c07ad'
+    }
+    $utils.$getData("/login",data,(res)=>{
+    })
+  }
+}
--- a/src/components/test/testVuex.vue
+++ b/src/components/test/testVuex.vue
+<template>
+  <div class="hello2">
+      <p>测试vuex状态管理的组件</p>
+      <input type="text" v-model="user_Info">
+      <el-button @click="changeInfo">按钮</el-button>
+    <span class="text" v-text="`这是子组件内引入的状态：${info}`"></span>
+  </div>
+</template>
+<script lang="ts" src="./test.ts"></script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+@import url("./test.less");
+</style>
--- a/src/http.ts
+++ b/src/http.ts
+/**
+ * 统一配置axios
+ * 使用qs.stringify解决axios跨域问题
+ * 配置axios请求类型为post时，使用qs.stringify来实现跨域访问，以及每次请求携带token
+ * 配置请求成功后res，实现诸如登录失败，登录超时，账户密码错误和请求错误等拦截器
+ */
+import Vue from 'vue'
+import axios from 'axios'
+// axios 配置
+axios.defaults.timeout = 1000*60*2; //请求超时设置
+// 引入配置的接口
+const apiUrl = process.env.API_ROOT;
+axios.defaults.baseURL = apiUrl;
+axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
+// axios.defaults.withCredentials=true;
+// http request 拦截器
+axios.interceptors.request.use(
+  config => {
+    if (config.method === 'post') {
+      config.data = JSON.stringify(config.data);
+    } else if (config.method === 'get') {
+    }
+    return config;
+  },
+  err => {
+    return Promise.reject(err);
+  });
+// http response 拦截器
+/**
+ * 拦截器也可以判定返回的response成功时的状态码进行拦截
+ */
+axios.interceptors.response.use(
+  res => {  
+      return Promise.resolve(res);
+  },
+  err => {
+    if (err.response!=undefined) { 
+      // console.log(err.response.status)   
+      switch (err.response.status) {
+        case 400: err.message = '请求错误(400)'; break;
+        case 401: err.message = '未授权，请重新登录(401)'; break;
+        case 403: err.message = '拒绝访问(403)'; break;
+        case 404: err.message = '请求出错(404)'; break;
+        case 408: err.message = '请求超时(408)'; break;
+        case 500: err.message = '服务器错误(500)'; break;
+        case 501: err.message = '服务未实现(501)'; break;
+        case 502: err.message = '网络错误(502)'; break;
+        case 503: err.message = '服务不可用(503)'; break;
+        case 504: err.message = '网络超时(504)'; break;
+        case 505: err.message = 'HTTP版本不受支持(505)'; break;
+        default: err.message = `连接出错(${err.response.status})!`;
+      }
+    } else {
+        err = {
+          message: '连接服务器失败!',
+          response:{
+            status: -100
+          }
+        };
+    }
+    return Promise.reject(err);
+  });
+export default axios;
--- a/src/main.ts
+++ b/src/main.ts
 // 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 App from './App.vue'
 import router from './router'
 import store from './store'
 Vue.config.productionTip = false
+//引入element-ui
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+Vue.use(ElementUI);
 /* eslint-disable no-new */
 new Vue({
  el: '#app',

--- a/src/mixins/test-mixin.ts
+++ b/src/mixins/test-mixin.ts
@@ -14,4 +14,5 @@ export default class TestMixin extends Vue {
  testMixinFunc (): void {
    console.log('this string is from test mixin console.log')
  }
 }
--- a/src/sfc.d.ts
+++ b/src/sfc.d.ts
+declare module "*.vue" {
+    import Vue from 'vue'
+    export default Vue
+}
+declare module "*.less" {
+    const content: any;
+    export default content;
+  }
--- a/src/store/index.ts
+++ b/src/store/index.ts
 import Vue from 'vue'
 import Vuex from 'vuex'
+// 测试模块
-import user from './modules/user'
+import test from "./modules/test"
 Vue.use(Vuex)
 const store = new Vuex.Store({
  modules: {
-    user
+    test
  }
 })

--- a/src/store/modules/test/actions.ts
+++ b/src/store/modules/test/actions.ts
+import { Commit } from 'vuex';
+const actions: any = {
+    changeInfos(context: { commit: Commit }, params: string){  
+      context.commit('changeInfo',params)
+   }
+}
+export default actions;  
\ No newline at end of file
--- a/src/store/modules/test/gettters.ts
+++ b/src/store/modules/test/gettters.ts
+const getters = {
+    info: state => state.info
+  }
+export default getters;  
\ No newline at end of file
--- a/src/store/modules/test/index.ts
+++ b/src/store/modules/test/index.ts
+// 测试模块。
+import { Commit } from 'vuex';
+import getters from "./gettters";
+import actions from "./actions";
+import mutations from "./mutations";
+let state: any = {
+  info: '测试模块的数据',
+}
+export default {
+  namespaced:true,
+  state,
+  mutations,
+  actions,
+  getters
+}
--- a/src/store/modules/test/mutations.ts
+++ b/src/store/modules/test/mutations.ts
+const mutations: any = {
+    changeInfo(state: any,infos: string){
+      state.info=infos+'fsdfs';
+    }
+  }
+export default mutations;  
\ No newline at end of file
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
-let state = {
-  info: {
-    data: 'store data from user'
-  },
-  auth: {}
-}
-const mutations = {}
-const getters = {
-  info: state => state.info
-}
-export default {
-  state,
-  mutations,
-  actions: {},
-  getters
-}
--- a/src/utils.ts
+++ b/src/utils.ts
+// 工具类函数集合
+import axios from "./http";
+const utils={
+    //去掉字符串头尾空格   
+    $trim(str) {
+      return str.replace(/(^\s*)|(\s*$)/g, "");
+    },
+    // 验证手机号
+    $CheckPhone(value):boolean{
+      const reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
+      if (!reg.test(value)) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    //匹配电话号码（座机）
+    $CheckTel(value):boolean{
+      const reg =/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;
+      if (!reg.test(value)) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    // 验证身份证号
+    $CheckIDcard(value){
+      const reg =/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
+      if (!reg.test(value)) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+     /**
+     * [时间戳处理]
+     * @Author   白富友
+     * attr =[{val:1,txt:'bb'}];
+     * @DateTime 2018-12-4
+     */
+    $time(time,type=1){ //13位
+      let res = '';     
+      if(time==''){
+        return res;
+      }   
+      const date = new Date(time);
+      const year = date.getFullYear();
+      const mon = this.$bigTen(date.getMonth()+1);
+      const day = this.$bigTen(date.getDate());
+      const hour = this.$bigTen(date.getHours());
+      const min = this.$bigTen(date.getMinutes());
+      const sec = this.$bigTen(date.getSeconds());
+      switch(type){
+        case 1:
+        res = mon+'/'+day+" "+hour+":"+min;
+        break;
+        case 2:
+        res =year+'-'+mon+'-'+day+" "+hour+":"+min+':'+sec;
+        break;
+        case 3:
+        res =year+'-'+mon+'-'+day+" "+hour+":"+min;
+        break;
+        case 4:
+        res =year+'-'+mon+'-'+day;
+        break;
+      }
+      return res;
+    },
+    // 将16进制转化为rgb
+    $colorRgb(color,type='string'){
+        let sColor= color.toLowerCase();
+        const reg= /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+        if(sColor&& reg.test(sColor)){
+            if(sColor.length=== 4){
+                let sColorNew= "#";
+                for(let i=1;i<4; i+=1){
+                    sColorNew+= sColor.slice(i,i+1).concat(sColor.slice(i,i+1));   
+                }
+                sColor= sColorNew;
+            }
+            //处理六位的颜色值
+            let sColorChange= [];
+            for(let i=1;i<7; i+=2){
+                sColorChange.push(parseInt("0x"+sColor.slice(i,i+2))); 
+            }
+            let res = null;
+            if(type=='string'){
+              res = "RGB(" +sColorChange.join(",")+ ")";
+            }else if(type=='attr'){
+              res = sColorChange;
+            }
+            return res;
+        }else{
+            return sColor; 
+        }
+    } ,
+    // 请求
+    $getData(url:string, data:object, callback:any) {
+      axios({
+        method:'post',
+        url:url,
+        data:data,
+        headers:{
+          'token':sessionStorage.getItem('token'),
+        },
+      }).then((res) => {    
+          callback(res);
+      }).catch((err)=>{
+          callback(err);       
+      })
+    }
+}
+export default utils;
\ No newline at end of file
--- a/src/vue-shim.d.ts
+++ b/src/vue-shim.d.ts
 import * as lodash from 'lodash'
 import Vue from 'vue'
-declare module '*.vue' {
-  export default Vue
-}
 // 全局变量设置
 declare global {
  const _: typeof lodash
+  const $utils
 }
 // iview 全局方法