解决接口跨域问题

src/App.vue

@@ -13,7 +13,7 @@ import { useStore } from 'vuex';
 export default{
 	setup(){
 		const store=useStore();
-		console.log(store.state.user);
+		//console.log(store.state.user);
 	},
 	created(){
 		this.getTabBarStatus();
@@ -26,7 +26,6 @@ export default{
 	},
 	methods:{
 		getTabBarStatus(){
-			console.log("刚开始："+this.$route+"刚开始："+this.$route.meta.isShowTarbar);
 			this.showStatus=this.$route.meta.isShowTarBar;
 		},
 	}

src/api/index.js

@@ -0,0 +1,50 @@
+import http  from "@/utils/request";
+import config from "@/config"
+
+export default  {
+    login : {
+        VerifyLogin : {
+            url:`${config.baseUrl}/Mobile/VerifyLogin`,
+            name:'测试',
+            post : function(params){
+                return http.post(this.url,params)
+            }
+        }
+    },
+    // 商品列表
+    main : {
+        ProductList : {
+            url:`${config.baseUrl}/Mobile/ProductList`,
+            name:'测试',
+            get : function(params){
+                return http.get(this.url,params)
+            }
+        }
+    },
+    my: {
+        OrderList : {
+            url:`${config.baseUrl}/Mobile/OrderList`,
+            name:'测试',
+            get : function(params){
+                return http.get(this.url,params)
+            }
+        },
+        OrderDetails : {
+            url:`${config.baseUrl}/api/accountApi/gettIsDealCount`,
+            name:'测试',
+            get : function(params){
+                return http.get(this.url,params)
+            }
+        }
+    },
+    order : {
+        SaveOrder : {
+            url:`${config.baseUrl}/sys/login`,
+            name:'测试',
+            post : function(params){
+                return http.post(this.url,params)
+            }
+        }
+    },
+}
+

src/api/userService.js

@@ -1,15 +0,0 @@
-// import request from "../utils/httpRequest.js"
-
-// export const login = (data)=>{
-// 	return request({
-// 		method:"POST",
-// 		url:"/sys/login",
-// 		data,
-// 	});
-// };
-  
-
-import {get,post} from "../utils/request"
-
-
-export const login = p => post('/sys/login', p);

src/config/index.js

@@ -0,0 +1,13 @@
+var defaultConfig = {
+
+    baseUrl : '/api',
+  
+    timeout : '50000',
+
+    api_key : '8C21178A017E712134B0FA9642F1ECDD049C13808219AF7EA4C8AFB0FF56AECA',
+
+    ContentType : 'Content-Type'
+}
+
+export default defaultConfig;
+

src/main.js

@@ -3,8 +3,18 @@ import App from './App.vue';
 import router from './router';
 import './styles/index.css';
 
-import { NavBar,Button,Form, Field, CellGroup,Tabbar, TabbarItem,Icon,Toast} from 'vant';
+import api  from '@/api';
+import axios from 'axios';
+
+
+import { NavBar,Button,Form, Field, CellGroup,Tabbar, TabbarItem,Icon,Toast,Image as VanImage,Grid, GridItem} from 'vant';
 import 'vant/lib/index.css';
 import store from './store';
 
-createApp(App).use(router).use(NavBar).use(Button).use(Form).use(Field).use(CellGroup).use(store).use(TabbarItem).use(Tabbar).use(Icon).use(Toast).mount('#app')
+const app = createApp(App)
+
+app.use(router).use(NavBar).use(Button).use(Form).use(Field).use(CellGroup).use(store).use(TabbarItem).use(Tabbar).use(Icon).use(Toast).use(VanImage).use(Grid).use(GridItem)
+
+app.config.globalProperties.$API = api
+app.config.globalProperties.$axios = axios
+app.mount('#app')

src/router/index.js

@@ -57,6 +57,13 @@ const routes = [
     meta:{
       isShowTarbar:true,
     }
+  },{
+    path: '/tabAll',
+    name: 'tabAll',
+    component: () => import('../views/tab_a/tabAll.vue'),
+    meta:{
+      isShowTarbar:false,
+    }
   },
   {
     path: '/about',

src/styles/index.css

@@ -1,3 +1,44 @@
+/*公用样式 开始----*/
+/*字体黑，正文常用*/
+.textRegular{
+	font-size: 12sp;
+	color: #262A30;
+}
+.textRed{
+	font-size: 13sp;
+	color: red;
+	font-weight: 700;
+	padding-top: 8px;
+}
+.textBlue{
+	font-size: 13sp;
+	color:#00aaff;
+	font-weight: 700;
+	padding-top: 8px;
+}
+.verticalLine{
+	width: 2px;
+	margin-top: 10px;
+	margin-bottom: 12px;	
+	background-color: rgb(236, 232, 232);
+}
+.hLine{
+	width: 100%;
+	height: 5px;
+	margin-bottom: 12px;	
+	background-color: #F2F2F2;
+}
+.flexll{
+	display: flex;
+}
+.flexll2{
+	display: flex;
+	flex-direction: column;
+}
+
+/*----公用样式 结束*/
+
+/*页面*/
 .d1{
 	display: flex;
 	width: 100%;	
@@ -14,4 +55,77 @@
 	padding-top: 30px;
 	padding-left: 30px;
 	padding-bottom: 10px;
+}
+
+/*tabAll */
+.tabtitlelay{
+	display: flex;
+	border-bottom: 2px rgb(236, 232, 232) solid;
+}
+.tabtitle1{
+	width: 8px;
+	margin-top: 10px;
+	margin-left: 10px;
+	margin-right: 8px;
+	margin-bottom: 12px;
+	height: 23px;	
+	background-color: #0293EB;
+}
+.tabtitle{
+	margin-top: 12px;
+	margin-bottom: 12px;
+	font-weight: bold;
+}
+.tabtitle2{
+	margin-top: 12px;
+}
+.tabtitle3{
+	margin-top: 12px;
+	color: red;
+}
+.tabtitle4{
+	margin-top: 12px;
+}
+.tabtitle5{
+	margin-left: auto;
+	padding-left: 20px;
+	padding-right: 20px;
+	padding-top: 12px;
+	padding-bottom: 12px;
+}
+
+.ffl2{
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 20px;
+}
+
+
+/*setting */
+.touxiang{
+	margin-left: 50px;
+	margin-top: 50px;
+}
+.setffl{
+	display: flex;
+	flex-direction: column;
+	margin-top: 60px;
+	margin-left: 15px;
+}
+.settingtex1{
+	font-size: large;
+}
+.settingtex2{
+	margin-top: 5px;
+	color: coral;
+}
+.settingtex3{
+	margin-top: 5px;
+}
+
+.settingtitlelay{
+	display: flex;
+	margin-top: 30px;
 }

src/tool/index.js

@@ -0,0 +1,16 @@
+
+var tool = {
+
+    setSession: function (name, val) {
+        window.sessionStorage.setItem(name, val)
+    },
+
+    getSession: function (name) {
+        let val = window.sessionStorage.getItem(name)
+        return val
+    }
+
+}
+
+export default tool;
+

src/utils/request.js

@@ -1,154 +1,84 @@
-/**axios封装
- * 请求拦截、相应拦截、错误统一处理
- */
-import BASE_URL from './config.js';
-import axios from 'axios';
-import QS from 'qs';
-import { Toast } from 'vant';
-import store from '../store/index';
-import * as $auth from "./auth"
- 
-// // 环境的切换
-// if (process.env.NODE_ENV == 'development') {    
-//     axios.defaults.baseURL = '/api';
-// } else if (process.env.NODE_ENV == 'debug') {    
-//     axios.defaults.baseURL = '';
-// } else if (process.env.NODE_ENV == 'production') {    
-//     axios.defaults.baseURL = 'http://api.123dailu.com/';
-// }
-axios.defaults.baseURL =BASE_URL;
- 
-// 请求超时时间
-axios.defaults.timeout = 10000;
- 
-// post请求头
-//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
-axios.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
- 
-// 请求拦截器
-axios.interceptors.request.use(    
-    config => {
-        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
-        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
-        const token = store.state.token;        
-        token && (config.headers.Authorization = token);        
-        return config;    
-    },    
-    error => {        
-        return Promise.error(error);    
-    })
- 
-// 响应拦截器
-axios.interceptors.response.use(    
-    response => {        
-		//原来是status，现改成statusCode
-        if (response.statusCode === 200) {            
-            return Promise.resolve(response);        
-        } else {            
-            return Promise.reject(response);        
-        }    
+import axios from "axios";          //引入axios
+import sysConfig from '@/config'    //引入配置文件
+
+// console.log(process.env.NODE_ENV)
+
+axios.defaults.baseURL = sysConfig.baseURL   //设置请求时间
+axios.defaults.timeout = sysConfig.timeout   //设置请求超时时间
+const ContentType = sysConfig.ContentType
+axios.defaults.headers["Content-Type"] = "application/json";
+
+/** 请求发送前拦截，用于配置求情内容，如headers参数等 */
+axios.interceptors.request.use(
+    (config) => {
+        config.params.api_key = sysConfig.api_key
+        return config
     },
-    // 服务器状态码不是200的情况    
-    error => {        
-        if (error.response.statusCode) {            
-            switch (error.response.statusCode) {                
-                // 401: 未登录                
-                // 未登录则跳转登录页面，并携带当前页面的路径                
-                // 在登录成功后返回当前页面，这一步需要在登录页操作。                
-                case 401:                    
-                    router.replace({                        
-                        path: '/login',                        
-                        query: { redirect: router.currentRoute.fullPath } 
-                    });
-                    break;
-                // 403 token过期                
-                // 登录过期对用户进行提示                
-                // 清除本地token和清空vuex中token对象                
-                // 跳转登录页面                
-                case 408:                     
-                    Toast({                        
-                        message: '登录过期，请重新登录',                        
-                        duration: 1000,                        
-                        forbidClick: true                    
-                    });                    
-                    // 清除token                    
-                    localStorage.removeItem('token');                    
-                    store.commit('loginSuccess', null);                    
-                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
-                    setTimeout(() => {                        
-                        router.replace({                            
-                            path: '/login',                            
-                            query: { 
-                                redirect: router.currentRoute.fullPath 
-                            }                        
-                        });                    
-                    }, 1000);                    
-                    break; 
-                // 404请求不存在                
-                case 404:                    
-                    Toast({                        
-                        message: '路径找不到',                        
-                        duration: 1500,                        
-                        forbidClick: true                    
-                    });                    
-                break;   
-				case 503:                    
-                    Toast({                        
-                        message: '服务不可用',                        
-                        duration: 1500,                        
-                        forbidClick: true                    
-                    });                    
-                break;  
-				case 504:                    
-                    Toast({                        
-                        message: '网络连接错误',                        
-                        duration: 1500,                        
-                        forbidClick: true                    
-                    });                    
-                break;             
-                // 其他错误，直接抛出错误提示                
-                default:                    
-                    Toast({                        
-                        message: error.response.data.message,                        
-                        duration: 1500,                        
-                        forbidClick: true                    
-                    });            
-            }            
-            return Promise.reject(error.response);        
-        }       
+    (error) => {
+        return error
+    }
+)
+
+/** 请求发送后返回拦截，用于处理数据格式等 */
+axios.interceptors.response.use(
+    (response) => {
+        return response
+    },
+    (error) => {
+        return error
+    }
+)
+
+//封装http请求
+
+var http = {
+    /**
+     * get请求
+     * @param {*} url       请求地址
+     * @param {*} params    请求参数，拼接再url地址栏后面，无需求时忽略该参数
+     * @param {*} config    请求的config相关配置
+     * @returns 
+     */
+    get: function (url, params = {}, config = {}) {
+        return new Promise((resolve, reject) => {
+            axios({
+                url: url,
+                method: 'get',
+                params: params,
+                config: config
+            }).then((response) => {
+                resolve(response.data)
+            }).catch((error) => {
+                reject(error)
+            })
+        })
+
+    },
+
+    /**
+     * post请求
+     * @param {*} url      请求地址 
+     * @param {*} data     请求参数
+     * @param {*} params   请求参数，拼接再url地址栏后面，无需求时忽略该参数
+     * @param {*} config   请求的config相关配置
+     * @returns 
+     */
+    post: function (url, data = {}, params = {}, config = {}) {
+        return new Promise((resolve, reject) => {
+            axios({
+                url: url,
+                method: 'post',
+                data: data,
+                params: params,
+                config: config
+            }).then((response) => {
+                resolve(response.data)
+            }).catch((error) => {
+                reject(error)
+            })
+        })
     }
-);
-/** 
- * get方法，对应get请求 
- * @param {String} url [请求的url地址] 
- * @param {Object} params [请求时携带的参数] 
- */
-export function get(url, params){    
-    return new Promise((resolve, reject) =>{        
-        axios.get(url, {            
-            params: params        
-        })        
-        .then(res => {            
-            resolve(res.data);        
-        })        
-        .catch(err => {            
-            reject(err.data)        
-        })    
-    });
-}
-/** 
- * post方法，对应post请求 
- * @param {String} url [请求的url地址] 
- * @param {Object} params [请求时携带的参数] 
- */
-export function post(url, params) {    
-    return new Promise((resolve, reject) => {         
-        axios.post(url, QS.stringify(params))        
-        .then(res => {            
-            resolve(res.data);        
-        })        
-        .catch(err => {            
-            reject(err.data)        
-        })    
-    });
 }
+
+export default http;
+

src/views/login/login.vue

@@ -46,7 +46,6 @@
 </template>
 
 <script>
-	import { login } from '../../api/userService';
 	import { useStore } from 'vuex';
 
 	export default {
@@ -76,13 +75,16 @@
 				  }
 
 				 //store.commit('setUser',"asdsdasd");
-				login(inputForm).then(({data}) => {
-					this.$store.commit('setUser',data);
-			   	})
+
+				// login(inputForm).then(({data}) => {
+				// 	this.$store.commit('setUser',data);
+			   	// })
 
 				// login(inputForm).then(res => {
 				// 	this.$store.commit('setUser',res.data);
 			   	// })
+
+				this.$router.push({name:'tabAll',query: {id:'123456'}})
 			},
 			changetbt(){
 				if(this.type==1){

src/views/setting/setting.vue

@@ -1,6 +1,66 @@
 <template>
-    <div class="about">
-      <h1>setting</h1>
+  <van-nav-bar
+	  title="个人中心"
+	  left-text=""
+	  left-arrow
+	  @click-left="onClickLeft"
+	/>
+
+  <div class="flexll">
+    <van-image
+        class="touxiang"
+        round
+        width="90px"
+        height="90px"
+        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+      />
+    <div class="setffl">
+        <div class="settingtex1">张三</div>
+        <div class="settingtex2">民宗干事</div>
+        <div class="settingtex3">盐城市盐都区民宗局</div>
     </div>
-  </template>
-  
+  </div>
+
+  <div class="settingtitlelay">
+		<div class="tabtitle1"></div>
+		<div class="tabtitle">信息管理</div>
+	</div>
+
+  <van-grid  :column-num="2">
+		<van-grid-item icon="photo-o" text="我的待办" />
+		<van-grid-item icon="photo-o" text="消息通知" />
+	</van-grid>
+
+
+</template>
+
+<script>
+	export default {
+		data() {
+			return{
+                title:'民宗干事',
+				username:"",
+				sms:"",
+				password:"",
+				password2:"",
+			}			
+		},
+		
+		created(){
+			let id=this.$route.query.id;
+		},
+
+		methods:{
+			onClickLeft(){
+				history.back();
+			},
+
+
+		},
+	 
+	};
+</script>
+
+<style>
+	
+</style>

src/views/siteActivity/siteActivityInfo.vue

@@ -0,0 +1,66 @@
+<template>
+    <van-nav-bar
+        title="个人中心"
+        left-text=""
+        left-arrow
+        @click-left="onClickLeft"
+      />
+  
+    <div class="flexll">
+      <van-image
+          class="touxiang"
+          round
+          width="90px"
+          height="90px"
+          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+        />
+      <div class="setffl">
+          <div class="settingtex1">张三</div>
+          <div class="settingtex2">民宗干事</div>
+          <div class="settingtex3">盐城市盐都区民宗局</div>
+      </div>
+    </div>
+  
+    <div class="settingtitlelay">
+          <div class="tabtitle1"></div>
+          <div class="tabtitle">信息管理</div>
+      </div>
+  
+    <van-grid  :column-num="2">
+          <van-grid-item icon="photo-o" text="我的待办" />
+          <van-grid-item icon="photo-o" text="消息通知" />
+      </van-grid>
+  
+  
+  </template>
+  
+  <script>
+      export default {
+          data() {
+              return{
+                  title:'民宗干事',
+                  username:"",
+                  sms:"",
+                  password:"",
+                  password2:"",
+              }			
+          },
+          
+          created(){
+              let id=this.$route.query.id;
+          },
+  
+          methods:{
+              onClickLeft(){
+                  history.back();
+              },
+  
+  
+          },
+       
+      };
+  </script>
+  
+  <style>
+      
+  </style>

src/views/tab_a/tabAll.vue

@@ -0,0 +1,138 @@
+<template>
+	<van-nav-bar
+	  title="智慧“和顺”"
+	  left-text="民宗干事"
+	  left-arrow
+	  @click-left="onClickLeft"
+	/>
+
+	<van-image
+		width="100%"
+		height="10rem"
+		fit="cover"
+		src="https://img1.baidu.com/it/u=2086445453,3056906789&fm=253&fmt=auto&app=138&f=GIF?w=1378&h=400"
+		/>
+
+	<div class="tabtitlelay">
+		<div class="tabtitle1"></div>
+		<div class="tabtitle">我的待办</div>
+		<div class="tabtitle2">（</div>
+		<div class="tabtitle3">15</div>
+		<div class="tabtitle4">）</div>
+		<van-icon name="ellipsis" class="tabtitle5" />
+	</div>
+	
+	<div class="flexll">
+		<div class="ffl2">
+			<div class="textRegular">待处理</div>
+			<div class="textRed">{{con1}}</div>
+		</div>
+		<div class="verticalLine"></div>
+		<div class="ffl2">
+			<div class="textRegular">已处理</div>
+			<div class="textBlue">8</div>
+		</div>
+	</div>
+	<div class="hLine"></div>
+
+	<div class="tabtitlelay">
+		<div class="tabtitle1"></div>
+		<div class="tabtitle">场所管理</div>
+	</div>	
+
+	<van-grid :border="false">
+		<van-grid-item icon="photo-o" text="场所登记" @click="getsome2" />
+		<van-grid-item icon="photo-o" text="场所人员信息" @click="getsome3" />
+		<van-grid-item icon="photo-o" text="牌位管理" />
+	</van-grid>
+
+	<div class="hLine"></div>
+
+	<div class="tabtitlelay">
+		<div class="tabtitle1"></div>
+		<div class="tabtitle">活动管理</div>
+	</div>	
+
+	<van-grid :border="false" >
+		<van-grid-item icon="photo-o" text="场所活动" />
+		<van-grid-item icon="photo-o" text="私设聚会点" />
+		<van-grid-item icon="photo-o" text="信教群众异常" />
+		<van-grid-item icon="photo-o" text="场所检查" />
+		<van-grid-item icon="photo-o" text="安防设施异常" />
+		<van-grid-item icon="photo-o" text="负责人会议" />
+		<van-grid-item icon="photo-o" to="/setting" text="其他" />
+	</van-grid>
+</template>
+
+<script>
+import tool from "@/tool";
+	export default {
+		data() {
+			return{
+                title:'民宗干事',
+				username:"",
+				sms:"",
+				password:"",
+				password2:"",
+				con1:"0",
+			}			
+		},
+		
+		created(){
+			let id=this.$route.query.id;
+			this.getSome();
+		},
+
+		methods:{
+			onClickLeft(){
+				history.back();
+			},
+
+			getSome(){
+	
+
+
+
+				//http://124.70.137.152:8095/api/accountApi/gettIsDealCount?username=admin
+			},
+
+			async getsome2(){
+				const inputForm ={
+					'username': '管理员',
+					'password': 'admin@2022',
+					'code': '',
+					'uuid': ''
+				  }
+				// login(inputForm).then(({data}) => {
+				// 	this.$store.commit('setUser',data);
+			   	// })
+
+				var res = await this.$API.order.SaveOrder.post(inputForm);
+                if (res.type == 1) {
+                    this.$router.replace({
+                        path: "/main",
+                    });
+                } else {
+                    Toast.fail(res.message);
+                }
+			},
+
+			async getsome3(){
+				console.log("11");
+				
+				var datas = {
+					username: "admin",
+            	};
+				var res = await this.$API.my.OrderDetails.get(datas);
+				this.con1=res;
+                console.log(res);
+			},
+
+		},
+	 
+	};
+</script>
+
+<style>
+	
+</style>

vue.config.js

@@ -2,42 +2,21 @@ const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
   transpileDependencies: true,
   publicPath:'./',
-  // dev:{
-  //   assetsSubDirectory: 'static',
-  //   assetsPublicPath: '/',
-  //   proxyTable: { // 配置跨域
-  //     '/api':{
-  //         target:`http://localhost:8084`, //请求后台接口
-  //         changeOrigin:true, // 允许跨域
-  //         pathRewrite:{
-  //             '^/api' : '' // 重写请求
-  //         }
-  //     }
-  //   }
-  // }
-
-
-  devServer: {
-    open: true,
-    host: 'localhost',
-    port: 8080,
-    //这里的ip和端口是前端项目的;下面为需要跨域访问后端项目
-    proxy: {
-      '/ResourcesCenter': {
-        target: 'http://localhost:8084/',//这里填入你要请求的接口的前缀
-        ws:true,//代理websocked
-        changeOrigin:true,//虚拟的站点需要更管origin
-        secure: true,                   //是否https接口
+  
+  // 代理服务，处理接口跨域请求
+  devServer:{
+    port:'8080',
+    proxy:{
+      '/api':{
+        target:'http://124.70.137.152:8095',// http://124.70.137.152:8095
+        //target:'http://localhost:8084',// 
+        changeOrigin:true,
         pathRewrite:{
-          '^/ResourcesCenter':''//重写路径
-        },
-        headers: {
-          referer: 'http://localhost:8084/', //这里后端做了拒绝策略限制，请求头必须携带referer，否则无法访问后台
+          '^/api':'/'
         }
       }
     }
-  }
-
+  },
 
 
 })