无效路由处理

mock/api/project/data/index.js → mock/api/project/query/data/index.js

@@ -8,11 +8,46 @@ const data = {
 			"name": "view1",
 			"children": [
 				{
-					"name": "label"
+					name: 'node1',
+					type: 'node',
+					properties: {
+						x: 0,
+						y: 0,
+						width: 0,
+						height: 0,
+						rotation: 0,
+						scaleX: 1,
+						scaleY: 1,
+						alpha: 1,
+						visible: true,
+					}
 				},
 				{
-					"name": "image"
-				}
+					name: 'node2',
+					type: 'label',
+					properties: {
+						text: '',
+						color: 'black',
+						size: 12,
+						align: 'left',
+					}
+				},
+				{
+					"name": "node3",
+					type: 'image',
+					properties: {
+						source: '',
+					}
+				},
+				{
+					"name": "node4",
+					type: 'rect',
+					properties: {
+						fillColor: 'white',
+						strokeColor: 'black',
+						strokeWidth: 1,
+					}
+				},
 			]
 		},
 		{
@@ -22,10 +57,12 @@ const data = {
 	"assets": [
 		{
 			"name": "bg.jpg",
+			uuid:"a1",
 			"url": "/bg.jpg"
 		},
 		{
 			"name": "btn-join.png",
+			uuid:"a2",
 			"url": "/btn-join.png"
 		}
 	]
@@ -46,4 +83,4 @@ const resp = {
 
 module.exports = function(){
 	return resp;
-}
+};

src/App.vue

 <template>
 	<div id="app" class="theme-light">
 		<router-view/>
+		<div class="invalid-route" v-if="invalidRoute">
+			<p>无效的页面 {{cd}}秒后跳转</p>
+		</div>
 	</div>
 </template>
 
 <script>
-	import events from './global-events'
 
 	export default {
 		name: "App",
+		data() {
+			return {
+				cd: 5,
+			}
+		},
+		computed: {
+			invalidRoute() {
+				return !this.$route.matched || this.$route.matched.length === 0;
+			}
+		},
+		watch: {
+			$route: {
+				handler: function(val, oldVal){
+					this.dealInvalidRoute();
+				},
+				deep: true
+			}
+		},
 		mounted() {
-
+			this.dealInvalidRoute();
 		},
 		methods: {
-
+			dealInvalidRoute(){
+				if (this.invalidRoute) {
+					this.cd = 5;
+					this.startCD();
+				}
+			},
+			startCD() {
+				this.timer = setInterval(() => {
+					if (this.cd <= 0) {
+						clearInterval(this.timer);
+						this.$router.push({name: 'home'});
+						return;
+					}
+					this.cd--;
+				}, 1000)
+			}
 		},
 	}
 </script>
 
 <style>
-
+	.invalid-route {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 </style>

src/api/common.js

@@ -24,7 +24,10 @@ class ApiError extends Error {
 	}
 }
 
-export async function fetchApi(uri, {params, method, contentType, errMessage} = {method: 'get', contentType: 'form'}) {
+export async function fetchApi(uri, {params, method = 'get', contentType = 'json', errMessage} = {
+	method: 'get',
+	contentType: 'json'
+}) {
 	let url = API_HOST + uri;
 
 	const options = {

src/api/env.js

@@ -7,7 +7,7 @@
 import {fetchApi} from "./common";
 
 export async function fetchEnv() {
-	return await fetchApi('/api/project/env', {
+	return await fetchApi('/api/editor/info', {
 		errMessage: 'Failed to fetch env',
 	})
 }

src/api/project.js

@@ -16,7 +16,6 @@ export async function createOne(project) {
 	return await fetchApi('/api/project/create', {
 		params: project,
 		method: 'post',
-		contentType: 'json',
 		errMessage: 'Failed to create project',
 	})
 }
@@ -25,7 +24,6 @@ export async function duplicateOne(project) {
 	return await fetchApi('/api/project/duplicate', {
 		params: project,
 		method: 'post',
-		contentType: 'json',
 		errMessage: 'Failed to duplicate project',
 	})
 }
@@ -33,13 +31,13 @@ export async function duplicateOne(project) {
 export async function deleteOne(id) {
 	return await fetchApi('/api/project/delete', {
 		params: {id},
-		method: 'delete',
+		method: 'post',
 		errMessage: 'Failed to delete project',
 	})
 }
 
 export async function getData(id) {
-	return await fetchApi('/api/project/data', {
+	return await fetchApi('/api/project/query/data', {
 		params: {id},
 		method: 'get',
 		errMessage: 'Failed to get project',
@@ -50,7 +48,6 @@ export async function updateOne(project) {
 	return await fetchApi('/api/project/update', {
 		params: project,
 		method: 'post',
-		contentType: 'json',
 		errMessage: 'Failed to save project',
 	})
 }

src/config.js

@@ -2,8 +2,8 @@
  * Created by rockyl on 2019-09-19.
  */
 
-//export const API_HOST = 'http://10.10.94.31:7777';
-export const API_HOST = 'http://localhost:3002';
+export const API_HOST = 'http://10.10.94.31:7777';
+//export const API_HOST = 'http://localhost:3002';
 export const ASSETS_BASE = 'http://0.0.0.0:4002/assets';
 
 //文件类型图标  t表示展示缩略图

src/locales/en.json

@@ -14,6 +14,7 @@
   "Data mapping": "Data mapping",
   "Template": "Template",
   "Preparing": "Preparing…",
+  "Deleting": "Deleting…",
   "Create project": "Create project",
   "Creating project": "Creating project…",
   "Create project success": "Create project success",

src/store/modules/project.js

@@ -22,16 +22,19 @@ export const projectStore = {
 			state.name = name;
 			state.creator = creator;
 
-			const localData = state.data;
-			const {views, assets, dataMapping} = JSON.parse(data);
-			if(!localData.views || localData.views.length === 0){
-				localData.views = views || [];
-			}
-			if(!localData.assets || localData.assets.length === 0){
-				localData.assets = assets || [];
-			}
-			if(!localData.dataMapping || localData.dataMapping.length === 0){
-				localData.dataMapping = dataMapping || [];
+			if(data){
+				const localData = state.data;
+				const {views, assets, dataMapping} = JSON.parse(data);
+				if(!localData.views || localData.views.length === 0){
+					localData.views = views || [];
+				}
+				if(!localData.assets || localData.assets.length === 0){
+					localData.assets = assets || [];
+				}
+				if(!localData.dataMapping || localData.dataMapping.length === 0){
+					localData.dataMapping = dataMapping || [];
+				};
+
 			}
 		},
 	},

src/store/modules/projects.js

@@ -10,8 +10,18 @@ export const projectsStore = {
 			state.splice(0);
 			state.push(...projects);
 		},
-		addProject(state, project){
-			state.push(project);
+		addProject(state, project) {
+			state.unshift(project);
+		},
+		deleteProject(state, projectID) {
+			for (let i = 0, li = state.length; i < li; i++) {
+				const item = state[i];
+
+				if (item.id === projectID) {
+					state.splice(i, 1);
+					break;
+				}
+			}
 		},
 	},
 	actions: {
@@ -29,5 +39,10 @@ export const projectsStore = {
 			commit('addProject', project);
 			return project;
 		},
+		async deleteProject({commit}, projectID) {
+			await projectApi.deleteOne(projectID);
+			commit('deleteProject', projectID);
+			return projectID;
+		},
 	},
 };
\ No newline at end of file

src/views/Editor.vue

@@ -48,7 +48,11 @@
 		},
 		mounted() {
 			const {projectID} = this.$route.params;
-			playWaiting(this.updateProject(projectID), this.$t('Preparing')).catch(e => {});
+			if(projectID){
+				playWaiting(this.updateProject(projectID), this.$t('Preparing')).catch(e => {});
+			}else{
+				this.$router.push({name: 'home'})
+			}
 		},
 		methods: {
 			getSize(id, side) {

src/views/Home.vue

@@ -34,7 +34,7 @@
 								size="small" circle plain>
 							</el-button>
 							<el-button
-								@click.native.prevent="deleteProject(scope.row)"
+								@click.native.prevent="onDeleteProject(scope.row)"
 								type="danger" icon="el-icon-delete"
 								size="small" circle plain>
 							</el-button>
@@ -94,8 +94,17 @@
 			selectProject(row, event) {
 				this.editProject(row.id);
 			},
-			async deleteProject(row, event) {
-				this.deleteAlert(row);
+			async onDeleteProject(project, event) {
+				this.$confirm(this.$t('This action will permanently delete project', {projectName: project.name}), this.$t('Alert'), {
+					confirmButtonText: this.$t('Confirm'),
+					cancelButtonText: this.$t('Cancel'),
+					type: 'warning'
+				}).then(
+					()=>{
+						playWaiting(this.deleteProject(project.id), this.$t('Deleting')).catch(e => {});
+					},
+					()=>{}
+				)
 			},
 			onCreateProject(projectID) {
 				this.editProject(projectID);
@@ -106,16 +115,10 @@
 			editProject(projectID) {
 				this.$router.push({name: 'editor', params: {projectID}});
 			},
-			deleteAlert(project) {
-				return this.$confirm(this.$t('This action will permanently delete project', {projectName: project.name}), this.$t('Alert'), {
-					confirmButtonText: this.$t('Confirm'),
-					cancelButtonText: this.$t('Cancel'),
-					type: 'warning'
-				})
-			},
 			...mapActions([
 				'updateProjects',
 				'updateEnv',
+				'deleteProject'
 			]),
 		},
 	}