Home未分类寒假24天.我写了个小米商城.MVC架构前后端分离

寒假24天.我写了个小米商城.MVC架构前后端分离

2014 年 8 月 17 日

写在前面

2021-1-27至2021-2-19,从早上九点写到晚上十一点,耗时24天;共计52个Go文件,55个HTML文件,15个CSS文件,10个JS文件,18张数据表。在大地老师的细心教导之下,我总算在开学之前完成了GoLang+BeeGo—仿小米商城项目。我只是一名普普通通的大二学生,不是什么大佬;纯手写的话肯定是不可能在这么短的时间内完成的。我也是购买了大地老师的课程,跟着他的脚步,一点一点从0到1写完的。有一说一大地老师真的讲得很好,他就是属于那种讲课讲得非常细的老师;我觉得这个课程的价值远远超过了这个课程的价格。如果,你对Golang比较感兴趣的话,我建议你可以花点时间写一下这个项目, 教程详情 。

在写这个项目的时候,我也加入了我自己的一些想法,在一些功能的实现上,并没有按照老师的方法去做而是另辟蹊径。我写这篇文章的主要目的就是,简述一下24天到底学到了一些什么知识,并将我写好的完整项目分享出来(附带运行教程).

每天写完代码后,我会将今天完成的内容写到这篇文章中,感兴趣的同学可以去看一看 小米商城—代码日记

项目演示网址 :http://mi.sunyj.xyz

项目后台网址 :http://mi.sunyj.xyz/admin/ 管理员账号:tourists 密码:123456

项目视频演示 :https://www.bilibili.com/video/BV1Up4y1n7iU#reply4178353497

项目简介

在简述学到的知识前,我们需要了解一些,这个项目需要完成那些内容 大家不妨到 小米商城 官网逛逛

从前台分析就是传统的电商网站,给用户提供浏览商品,购买商品等服务

从后台分析,涉及到用户管理,轮播图管理,商品管理等模块

前台所展示的商品信息,都是通过后台管理模块编辑出来的,而后台管理关联的是数据库里面的内容;所以说整个项目其实就是通过BeeGo和GORM对数据库里面的内容进行增删改查,把数据库里面的数据提取出来,渲染到前台或者后台页面。 BeeGo属于MVC架构的框架,整个项目也是将MVC的功能发挥得淋漓尽致。如果说你之前用MVC架构的框架写过项目,那么BeeGo几乎可以直接上手。

学无止境

GoLang

  • Go即GoLang，是Google公司2009年11月正式对外公开的一门编程语言，它不仅拥有静态编译语言的安全和高性能，而且又达到了动态语言开发速度和易维护性。有人形容Go语言：Go = C + Python , 说明Go语言既有C语言程序的运行速度，又能达到Python语言的快速开发。在整个写代码的过程中,Go给我的感受就是快,不仅仅体现在运行速度上,更是体现在开发上;特别是配合GORM进行数据库的增删查改,方便得不要不要的,以至于我现在都快忘记常用的SQL语句了。Go的发展前景一片光明,这也是我为什么在寒假中选择使用Go去完成一个完整的项目

BeeGo

  • BeeGo是一个开源的基于 Golang 的 MVC 框架，主要用于 Golang Web 开发。Beego 可以 用来快速开发 API、Web、后端服务等各种应用。而且BeeGo是一个非常简洁的MVC框架,我之前用过PHP的Laravel框架同样也是MVC的架构;Laravel的slogan是:简洁、优雅的PHP开发框架;但是跟BeeGo比起来,我感觉BeeGo更加简洁,而且功能也非常强大。对于MVC架构百度百科的解释是这样的:经典MVC模式中，M(model)是指业务模型，V(view)是指用户界面，C(controller)则是控制器，使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。我认为在MVC框架中最大的优点就是:三个层各施其职，所以如果一旦哪一层的需求发生了变化，就只需要更改相应的层中的代码而不会影响到其它层中的代码,耦合性低

captcha

  • 从字面意思应该就能知道这个的功能就是提供验证码,它的主要运用场景是在进行登录操作的时候.captcha是BeeGo内置的验证码模块,仅仅几行代码就能实现

Gorm

  • The fantastic ORM library for Golang aims to be developer friendly.(基于Golang的极其出色的ORM库,对开发者非常友好)。Gorm简单理解就是操作数据库的第三方库,支持 MySQL, PostgreSQL, SQlite, SQL Server 。之前我写Python的时候操作数据是用PyMysql,写PHP的时候是用Mysqli;他们的共同点都是需要自己写sql语句.但是Gorm不同,根本不需要自己写sql语句,直接调用对应的方法就能非常方便的实现增删查改,以至于我都快忘记常用的sql语句了。BeeGo里面的model模块配合Gorm使用,绝配!

在整个项目中mysql、html、css、javascript、jquery、ajax这些技术就不用多说了,还涉及到了session、cookie、redis、wysiwyg-editor、jqPaginator、OSS云存储、gomarkdown、goemail等等;这些我就不一一道来了,因为我感觉文字没有代码形象,大家看着也非常空洞;所以我就做了一期视频,感兴趣的同学不妨去看一看。

运行项目

下载代码: GitHub 由于项目中的static文件内容较多,而且代码放在GitHub上面,有的同学可能下载速度会很慢,我就将这里面的内容放在了蓝奏云,下载完成后,解压到此目录即可 蓝奏云

环境配置

  • win10
  • Go 1.15
  • BeeGo 1.12
  • Mysql 8.0
  • Redis

1:生成数据表

在MySql数据库中创建名为 micom 的数据,接着运行sql文件 数据导入成功后,需要修改项目中的数据库连接代码 修改models文件夹中的core.go 

func init() {
    DB,err = gorm.Open("mysql", "root:123456@/micom?charset=utf8&parseTime=True&loc=Local")
      //DB,err = gorm.Open("mysql", "用户名:数据库密码@/数据库名称?charset=utf8&parseTime=True&loc=Local")
    if err != nil {
        beego.Error(err)
    }
}

2:安装第三方包

在IDE(VSCode或者Goland或者其他IDE)中打开此项目,运行(运行之前记得开启redis)main.go文件,不出意外的应该会自动安装go.mod里面的第三方包 如果不行的话,可在go.mod里面查看第三方包选择手动安装

3:运行项目

准备工作完成后,就可以运行项目啦 你可以选择运行main.go文件,也可以在终端输入 bee run ,运行此项目 最后打开 http://127.0.0.1:8080/ 即可 默认用户:1007643852@qq.com 密码:123456 后台地址 http://127.0.0.1:8080/admin 管理员账号:admin 密码:123456(进入后台可修改)

到此为止,项目应该是能跑起来了,如果你只想体验一下这个项目,完成前三步就行了 如果你想实现oss云存储和用户注册的功能,可以接着往下看

4:oss云存储

我自己部署的项目是将图片放在oss云存储里面的,在app.conf文件中, ossStatus = true 但是,在GitHub上面的代码, ossStatus = false ,也就是默认关闭了这个功能 项目中的图片能够正常显示,是因为我把云存储上面的图片都下载下来放在了项目中

如果你想使用oss云存储功能,需要先在阿里云开通此服务,并将static中的文件全部上传 之所以需要在阿里云开通服务,是因为项目中使用的是阿里云的SDK 开通并上传文件后,在后台中的其他配置中,将所需的参数填入即可

最后,在app.conf文件中将 ossStatus 改为 true

5:发送邮件,完善注册功能

想要发送邮件,必须给你自己的邮箱开头STMP服务 之后,在controller/mindex/login.go文件中第143行代码进行修改

接着,在浏览代码中你会看见这样的代码 也就是需要将项目部署上线并有域名才能实现这个功能

verifyUrl := "部署上线的域名地址/pass/verifyUrl?verify="+models.Md5(passwd+"micom")+"&email="+email
// 示例代码
verifyUrl := "http://mi.sunyj.xyz/pass/verifyUrl?verify="+models.Md5(passwd+"micom")+"&email="+email

6:部署上线

linux服务器部署beego项目

要想项目跑在服务器上,那么肯定需要准备一台服务器,这里我已Linux为例 如果说,你想通过指定的网址进行访问,那么还需要一个域名 如果没有的话也没关系,可以通过IP地址加端口号也可以进行访问

1:将本地数据库文件复制到服务器的数据中

这里我使用的是Navicat这个软件进行操作

  1. 首先将本地数据库中的数据加结构转储为SQL文件
  2. 使用Navicat连接服务器的数据库
  3. 连接成功后,运行刚才转储的SQL文件 需要注意的是,SQL文件中的字符集和排序规则 一定 要和服务器数据的类型一样,不然会导入数据失败 如果类型不一样,先查看服务器中的类型是什么,接着用notepad++或者其他工具打开刚才的SQL文件,进行批量替换就行了

2:打包BeeGO项目

在打包之前,我们需要更改一些项目连接数据库的参数 在腾讯云服务器中,包含数据库文件的数据库为micom,用户为micom,密码为124212,跟本地数据库的信息不同,所以需要在core.go文件中进行修改

func init() {
    DB,err = gorm.Open("mysql", "micom:124212@/micom?charset=utf8&parseTime=True&loc=Local")
    if err != nil {
        beego.Error(err)
    }
}

在GoLand中,打开终端,输入 bee pack -be GOOS=linux ,即可将BeeGo项目打包成Linux平台可运行的程序

3:运行项目

打包成功后,会在当前项目的根目录下面生成.tar.gz文件,我们将这个文件上传到服务器的文件夹中进行解压即可 关于文件夹,建议放在www/wwwroot/创建一个文件夹 这样的目录下,我自己的目录:www/wwwroot/micom

接着,进入到micom中,输入 nohub ./项目名称 & 即可运行项目 nohub ./micom & 项目中用到了redis,需要在服务器中安装redis

项目跑起来后,可以通过服务器的IP地址,加上你在项目中.conf配置文件中设置的端口号进行访问

4:DNS解析

如果我们想用域名进行访问网站,需要进行域名解析,和Nginx配置 域名解析就不用多解释了,经常玩服务器的同学应该很老练

关于Nginx,我用到了宝塔面板,在面板进行了配置 在/www/server/panel/vhost/nginx 这个目录下,新建了一个配置文件 micom.conf 将IP地址指向了刚刚解析的域名,这样我们就可以通过域名进行访问 

server {
    listen       80;
    server_name  mi.sunyj.xyz;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
    #设置主机头和客户端真实地址，以便服务器获取客户端真实 IP
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    #禁用缓存
    proxy_buffering off;
        
    proxy_pass http://42.***.**.**:****/;
    }
    location /socket.io {        
        # 此处改为 socket.io 后端的 ip 和端口即可
        proxy_pass http://127.0.0.1:3001;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
 
}

Related Posts

About The Author

maynard

懒散，不想无聊