记录一个教学的交互式系统的开发 —— 环境搭建

创建项目

---

最近临近毕业，也到了毕业设计和找工作的时间了，所以就想着做一个开源项目，之前上课也不是很满意学校的教学系统，也就是，想着做一个可以记录学生学习记录和教师教学记录的平台，支持网页、桌面应用和小程序的项目。
这个项目呢打算使用的技术栈：
前端：vue3.0 + typescript + element plus + electron
后端：golang + gin + gorm
项目名：Mango Education Interactive Service —— MEIS
技术栈会有出入后面也会持续更新的。

搭建前端环境

在你的项目目录中执行 npm create vue@latest

我这里是已经创建了文件夹所以直接在当前文件下创建，关于其他的配置项一律选择no，我们在后面慢慢配置。

运行成功后我们将会看到这个页面：

1. typescript配置

在命令行中运行：vue add typescript

如果出现报错：

查看环境变量中是否配置了node_global的绝对路径。
查看命令：npm config get prefix
如果还是失败：查看目录中是否有vue环境，没的话运行：npm i -g @vue/cli@next

错误2：

执行：Set-ExecutionPolicy -Scope CurrentUser

执行：vue -V

可以看到版本号时，则成功了。

安装完成后他会问你，是否需要使用class风格装饰器也就是：

 home = new Vue() => class Home extends Vue{}
1

我这里选择no。

接着问你：是否使用babel与typescript自动检测填充。可以辅助我们开发，选择yes

是否将所有的js文件转换为ts：yes。

是否允许js编译。

是否跳过所有声明文件的类型检查（建议应用程序使用）

如果你和我报同样的错误：

执行：

1. npm i -S-D @vue/cli-service
2. vue add typescript

查看文件：

已经安装成功。
若运行显示找不到main.js文件，记得修改Index.html中的文件引用。

2. 安装pinia

也就是之前我们常用的vuex，pinia是重新设计与Composition API一起使用的。以后我们会单独说他和vuex的区别。
执行：vue add pinia

3. 安装router

执行：vue add router

搭建后端

1. 搭建环境

运行：go mod init [项目名]

显示你创建了一个新的文件。

创建文件：main.go

执行文件：go run main.go
显示：

2. 配置gorm

运行：go get -u gorm.io/gorm和go get -u gorm.io/driver/mysql
我们这里使用的是mysql

测试是否安装成功：

func main() {
	dsn := "root:123456@tcp(127.0.0.1:3306)/mesi?charset=utf8mb4&parseTime=True&loc=Local"
	_, err := gorm.Open(mysql.Open(dsn), &gorm.Config{})
	if err != nil {
		fmt.Println("err:", err)
	}
	fmt.Println("数据库链接成功")
}
1
2
3
4
5
6
7
8

3. 配置gin

运行：go get -u github.com/gin-gonic/gin
测试是否安装成功：

r := gin.Default()
	r.GET("/ping", func(c *gin.Context) {
		c.JSON(200, gin.H{
			"message": "pong",
		})
	})
	r.Run() // listen and serve on 0.0.0.0:8080
1
2
3
4
5
6
7

访问：127.0.0.1:8080/ping

总结

到这里我们的第一步配置就完成了，下一章我们继续完成项目的搭建，后面会用MEIS来替代我整个项目名，前端和后端的开发文章也会分开。