项目介绍
客户端介绍
环境准备
运行vue等技术开发的客户端项目,需要安装Node.js环境
下载
1.Windows电脑安装Nodejs环境
- 1、windows环境下选择.msi安装文件。然后进行双击node.msi，选择安装路径。
- 2、配置环境变量。在计算机（或者我的电脑）右击属性 -> 高级系统设置 -> 环境变量进行配置。新建NODE_PATH变量并设置Nodejs的安装目录。
macOS系统安装Nodejs
brew install nodejs
Linux系统安装Nodejs
tar -xvf node-v10.15.3-linux-x64.tar.xz
vi /etc/profile
export NODEJS=/opt/node/node-v10.15.3-linux-x64
export PATH=$NODEJS/bin:$PATH
// 保存/etc/profile文件后
node -v
// 看版本
服务端介绍
我们着重后端项目开发
创建项目
mkdir CloudRestaurant
创建配置文件目录
mkdir config
config目录中,配置app.json配置文件
{
"app_name": "youmen",
"app_mode": "debug",
"app_host": "localhost",
"app_port": "8090"
}
创建一个tool目录
里面创建config.go文件,用于解析项目配置信息,config.go如下
type Config struct {
AppName string `json:"app_name"`
AppMode string `json:"app_mode"`
AppHost string `json:"app_host"`
AppPort string `json:"app_port"`
}
var _cfg *Config = nil
func GetConfig() *Config {
return _cfg
}
func ParseConfig(path string) (*Config, error) {
file, err := os.Open(path)
if err != nil {
panic(err)
}
defer file.Close()
reader := bufio.NewReader(file)
decoder := json.NewDecoder(reader)
if err := decoder.Decode(&_cfg); err != nil {
return nil, err
}
return _cfg, nil
}
编写main.go
func main() {
//读取配置文件
cfg, err := toolbox.ParseConfig("./config/app.json")
if err != nil {
toolbox.Error(err.Error())
return
}
app := gin.Default()
app.Run(cfg.AppHost + ":" + cfg.AppPort)
}
编写hello world
编写Controller: 创建controller，并创建HelloController。
package controller
import "github.com/gin-gonic/gin"
type HelloController struct {
}
func (hello *HelloController) Router(engine *gin.Engine) {
engine.GET("/hello", hello.Hello)
}
func (hello *HelloController) Hello(context *gin.Context) {
context.JSON(200, map[string]interface{}{
"message": "hello world",
})
}
添加路由
在main.go程序中添加路由设置
func registerRouter(router *gin.Engine) {
new(controller.HelloController).Router(router)
}
项目前端使用及调试
前端项目目录说明
运行前端项目
安装好了nodejs环境后,可以使用命令对前端项目进行操作
进入项目中
cd shop-client
常用命令
...
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
}
...
npm run build
请求接口API
前端页面vue源文件
路由文件
...
"dependencies": {
"axios": "^0.18.0",
"better-scroll": "^1.12.6",
"date-fns": "^1.29.0",
"fastclick": "^1.0.6",
"mint-ui": "^2.2.13",
"mockjs": "^1.0.1-beta3",
"swiper": "^4.3.3",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
}
...
项目入口
项目运行
/*
cd shop-client
npm run dev
*/