谷粒商城中前端

99WOODYXIN

已于 2023-03-24 21:23:28 修改

阅读量521

点赞数

分类专栏：谷粒商城文章标签：前端 vue.js javascript

于 2022-12-15 18:31:56 首次发布

本文链接：https://blog.csdn.net/m0_46179147/article/details/128333714

版权

谷粒商城专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、Node

前端开发，少不了 node.js；Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
http://nodejs.cn/api/
我们关注与 node.js 的 npm 功能就行；
NPM 是随同 NodeJS 一起安装的包管理工具，JavaScript-NPM，Java-Maven；
1）、官网下载安装 node.js，并使用 node -v 检查版本
2）、配置 npm 使用淘宝镜像

npm config set registry http://registry.npm.taobao.org/

3）、大家如果 npm install 安装依赖出现 chromedriver 之类问题，先在项目里运行下面命令

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

然后再运行 npm install

2、 NVM的使用

NVM是Node版本管理的工具，很好用

3、Npm

node版本-nodessas-googleDriver-GoogleChorme版本的一致性问题

4、前端版本问题

5、Vue

5.1 Vue思想

5.2 Vue指令

5.3 组件化

5.4 Webpack

复用

vue报错-Error: Cannot find module ‘fs/promises’ - 腾讯云开发者社区-腾讯云
https://cloud.tencent.com/developer/article/2130188

1、安装Vue和配置Vue.cmd环境变量
2、通过webpack启动Vue项目
3、安装Element-ui
4、VUE整合Element-ui完成页面模板

Element-ui 文档

Vscode的使用和插件

Vue
LiveServer
Babel

模板引擎

谷粒商城前端后续开发采用动静分离+模板引擎开发
什么是模板引擎？？

Thymeleaf 是新一代 Java 模板引擎，与 Velocity、FreeMarker 等传统 Java模板引擎不同，Thymeleaf 支持 HTML 原型，其文件后缀为“.html”，因此它可以直接被浏览器打开，此时浏览器会忽略未定义的 Thymeleaf 标签属性，展示 thymeleaf 模板的静态页面效果；当通过 Web 应用程序访问时，Thymeleaf会动态地替换掉静态内容，使页面动态显示。

Thymeleaf 通过在 html 标签中，增加额外属性来达到“模板+数据”的展示方式，示例代码如下。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--th:text 为 Thymeleaf 属性，用于在展示文本-->
<h1 th:text="迎您来到Thymeleaf">欢迎您访问静态页面 HTML</h1>
</body>
</html>

在使用 Thymeleaf 之前，首先要在页面的 html 标签中声明名称空间，示例代码如下。

xmlns:th="http://www.thymeleaf.org"

Thymeleaf教程（10分钟入门）
http://c.biancheng.net/spring_boot/thymeleaf.html

前端页面搭建

思路

1、上传static文件夹到nginx的html目录下（windows），达到动静分离的效果
2、引入thymeleaf到后端项目中，在templates文件夹下引入各个模块的html文件，并重命名
3、后端设置webController供页面请求跳转
4、nginx80端口监听本地域名，然后请求转发给gateway8888端口网关服务
5、在网关中配置路由和断言，将域名通过nacos注册中心转发到各个微服务的模块

 - id: gulimall_host_route
          uri: lb://demo-product
          predicates:
            - Host=gulimall.com,item.gulimall.com
            #- Host=**.gulimall.com,item.gulimall.com
        - id: demo_serach_host
          uri: lb://demo-search
          predicates:
            - Host=search.gulimall.com
          #未实现路由
        - id: gulimall_auth_route
          uri: lb://demo-auth
          predicates:
            - Host=auth.gulimall.com
        - id: gulimall_cart_route
          uri: lb://demo-cart
          predicates:
            - Host=cart.gulimall.com
        - id: gulimall_order_route
          uri: lb://demo-order
          predicates:
            - Host=order.gulimall.com
        - id: gulimall_member_route
          uri: lb://demo-member
          predicates:
            - Host=member.gulimall.com
        - id: gulimall_seckill_route
          uri: lb://demo-seckill
          predicates:
            - Host=seckill.gulimall.com

127.0.0.1  search.gulimall.com
127.0.0.1  item.gulimall.com
127.0.0.1  auth.gulimall.com
127.0.0.1  cart.gulimall.com
127.0.0.1  ssoserver.com
127.0.0.1  client1.com
127.0.0.1  client2.com
127.0.0.1  gulimall.com

 }
	upstream gulimall {
		 server localhost:8888;
   }
	#谷粒商城项目
	server {
		 listen       80;
		 server_name  gulimall.com *.gulimall.com;
		 #动静分离，html页面需要静态资源
		 location /static/ {
			 root html;
	     #   root D:/1_development/nginx-1.18.0/html/static
		 }
    #反向代理
    location / {
	    #host丢失问题
        proxy_set_header Host $host;
        proxy_pass http://gulimall;
    }


   }