基于vue，nodejs前后端分离的建站实践(web app)

开发前的服务器部署写了一篇爬坑日记，就不多提了。

前端设计的比较潦草，后台主要学习了慕课视频后，动手去写的，有正在搭小网站的同学可以一起交流交流，我也是被坑的不想说话了(此处省略一万字)。由于学习还很浅，代码不够严谨与完善，后期进行补修吧，这段时间也没什么时间了，功能后期慢慢完善，服务器也有点便宜，连个发表情的插件都抗不住，我也很难受，买不起。先分享过来，希望热爱开发的我们，少踩坑。

前端地址https://github.com/Vitaminaq/Confession-Wall(刚接触vue写的，风格极差)

后台地址：https://github.com/Vitaminaq/cfsw-nodeserver，用的是node+mongodb；

(如果觉得有用的话，可以给我颗星星,感谢大佬）

最近用vuex和typescript进行了一次重构，有喜欢的同学可以去看看。

前端基于vue-cli 2.0+typescrpt 项目重构github地址(ssr升级中。。。)；

2.0目前存在的比较少了，一般就是老项目升级。

前端基于vue-cli 3.0+typescript 重构地址(很有趣，还未重构完，欢迎fork参与讨论，欢迎star)；后端重构地址，用的是node+mysql；

3.0的脚手架，对ts的支持更加亲和了，看起来也比较的干净一点，代码风格比较舒适。下面我贴一下我重构写的代码。

// 封装的一个请求数据的vuex.store的基类
import VuexClass from 'vuex-class.js';

class BaseVuexClass<P, D> extends VuexClass {
	readonly namespaced: boolean = true;
	api: any;
	constructor(api: any) {
		super();
		this.api = api;
	}
	public readonly state: API.APIBaseStoreState<P, D> = {
		params: {} as P,
		res: {
			code: 0,
			data: {} as D
		},
		requestStatus: 'unrequest'
	};
	get res(): API.APIBaseResponse<D> {
		return this.state.res;
	}
	get requestStatus(): Loader.RequestStatus {
		return this.state.requestStatus;
	}
	$assignParams(params: P): this {
		Object.assign(this.state.params, params);
		return this;
	}
	$RequestStart(): this {
		this.state.requestStatus = 'requesting';
		return this;
	}
	$RequestSuccess(res: API.APIBaseResponse<D>): this {
		if (res.code === 0 && res.data) {
			this.state.requestStatus = 'success';
			this.state.res = { ...res };
			return this;
		} else {
			if (res.code !== 0 && res.data) {
				this.state.res = { ...res };
			}
			this.state.requestStatus = 'error';
		}
		return this;
	}
}

export default BaseVuexClass;

// 通过继承基类的login vuex.store.module
import LoginApi from '@src/api/login';
import BaseLoaderData from '@src/common/base-loader-data';
import VuexClass from 'vuex-class.js';

class GetUserHeaderImg extends BaseLoaderData<
	API.Login.UserHeaderImg.RequestParams,
	API.Login.UserHeaderImg.Data
> {
	readonly namespaced: boolean = true;
	async getUserHeaderImg(): Promise<this> {
		this.$RequestStart();
		const res: API.Login.UserHeaderImg.Response = await this.api.getUserHeaderImg(
			this.state.params
		);
		this.$RequestSuccess(res);
		return this;
	}
}
class UserLogin extends BaseLoaderData<
	API.Login.UserLogin.RequestParams,
	API.Login.UserLogin.Data
> {
	readonly namespaced: boolean = true;
	async userLogin(): Promise<this> {
		this.$RequestStart();
		const res: API.Login.UserLogin.Response = await this.api.userLogin(
			this.state.params
		);
		this.$RequestSuccess(res);
		return this;
	}
}

class Login extends VuexClass {
	readonly namespaced: boolean = true;
	getUserHeaderImg: GetUserHeaderImg;
	userLogin: UserLogin;
	modules: {
		getUserHeaderImg: GetUserHeaderImg;
		userLogin: UserLogin;
	};
	constructor() {
		super(new LoginApi());
		Object.defineProperty(this, 'api', {
			enumerable: true
		});
		this.getUserHeaderImg = new GetUserHeaderImg(new LoginApi());
		this.userLogin = new UserLogin(new LoginApi());
		this.modules = {
			getUserHeaderImg: this.getUserHeaderImg,
			userLogin: this.userLogin
		};
	}
}

export default Login;

展示地址：cfswall(打开浏览器模拟手机模式，有可能服务器失效了，无法预览)

基于vue，nodejs前后端分离的建站实践(web app)

猜你喜欢