吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 6486|回复: 43
收起左侧

[其他原创] 寒假24天.我写了个小米商城.MVC架构前后端分离

  [复制链接]
Java_S 发表于 2021-2-24 19:45
本帖最后由 Java_S 于 2021-2-25 09:59 编辑

写在前面

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   


昨天(2021-2-24)晚上睡觉的时候,我脑海中突然闪过一个问题”写代码真的有用吗?”


写代码有用吗?  当然没用啊!



你看看篮球场上的小哥哥们多阳光多帅气呀,随便一投就是三分球,伴随着的是小迷妹的欢呼声,别人一个小动作就可以迷倒万千少女;再看看你自己,三天不洗头,满脸胡须,边幅也不修,每天坐在电脑面前无精打采,不是写Bug就是改Bug,外行人看来只不过是个会敲键盘的”怪物”罢了.


你看看那些唱歌唱得好听的人,嗓音仿佛被天使吻过一样,不仅能唱还能写,多有才华呀;再看看你自己,普通话都说不利索,还时不时的结巴一两句,张开闭口不是专业术语,就是自言自语:”没问题呀,怎么跑不起来呢”,你以为说点专业术语别人觉得你很厉害吗,除了你自己懂又有多少人知道呢?


你看看游戏玩得起飞的大神们,一带四,Penta kill,Killing Spring, Dominating,轻而易举的事情,这才是真的优秀呀;再看看你自己,觉得带几个小学弟,小学妹,是不是很了不起了,带很多徒弟又怎样,他们又不会觉得你很棒,只不过是个听得懂他们说话的”百度搜索”,连那种最基础的问题都要你手把手的教,累都累死你呀.


但是......

##  项目简介

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

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

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


前台所展示的商品信息,都是通过后台管理模块编辑出来的,而后台管理关联的是数据库里面的内容;所以说整个项目其实就是通过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文件

  1. 使用Navicat连接服务器的数据库
  2. 连接成功后,运行刚才转储的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;
    }

}

免费评分

参与人数 14吾爱币 +24 热心值 +13 收起 理由
ihiee99 + 1 + 1 用心讨论,共获提升!
MICHAELWEI + 1 我很赞同!
yjn866y + 1 + 1 谢谢@Thanks!
zlixunnhuan + 1 + 1 用心讨论,共获提升!
苏紫方璇 + 10 + 1 感谢发布原创作品,吾爱破解论坛因你更精彩!
正己 + 3 + 1 我很赞同!
chinawolf2000 + 1 + 1 热心回复!
grrr_zhao + 1 + 1 谢谢@Thanks!
NuG_123 + 1 + 1 用心讨论,共获提升!
YMYS + 1 + 1 感谢发布原创作品,吾爱破解论坛因你更精彩!
wqphhx + 1 + 1 用心讨论,共获提升!
ma4907758 + 1 谢谢@Thanks!
薇尔莉特 + 1 + 1 太厉害了。
eui620 + 1 + 1 用心讨论,共获提升!

查看全部评分

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

不言谢c 发表于 2021-2-25 05:55
我也时刻深研究过 小米官网前台样式的。
打开我就看了两眼,就看出两点不一样。
1、主菜单下拉,应该是淡入淡出效果,也就像fadeToggle()
2、你主bannr图轮播,箭头没有背景的话,让人不知道范围,而且点击起来切换特别慢。让我一顿着急狂点。
不知道是你互斥锁问题,还是封装动画延迟时间长。
 楼主| Java_S 发表于 2021-2-25 08:52
不言谢c 发表于 2021-2-25 05:55
我也时刻深研究过 小米官网前台样式的。
打开我就看了两眼,就看出两点不一样。
1、主菜单下拉,应该是淡 ...

确实有些地方还没有写到位,感谢提出的问题
wujl82 发表于 2021-2-24 19:57
晚空 发表于 2021-2-24 19:59
这个登录界面,真的好看。我好几个站的登录都是这样的
bmwgtr 发表于 2021-2-24 20:02
赞,前后端都自己写,厉害厉害,学习了
麦迪就是帅 发表于 2021-2-24 20:06
加油!不错!
若白 发表于 2021-2-24 20:06
真的好厉害啊!羡慕了!!
QingYi. 发表于 2021-2-24 20:08
0基础能干?
hj542666772 发表于 2021-2-24 20:13
太厉害了,送上我的膝盖
潇未然 发表于 2021-2-24 20:14
大二学生,可以了。牛皮。你的博客用的是什么源码,求分享
头像被屏蔽
薇尔莉特 发表于 2021-2-24 20:16
提示: 作者被禁止或删除 内容自动屏蔽
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-25 19:34

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表