商城-商品管理-搭建前台系统

本文介绍了商城前台系统的搭建过程,包括创建静态资源工程,使用live-server实现热部署,配置域名访问,以及定义common.js中的工具函数。通过live-server简化前端开发,利用hosts和nginx实现域名访问,并在common.js中对axios进行全局配置,提供便利的工具方法。
摘要由CSDN通过智能技术生成

3.搭建前台系统

后台系统的内容暂时告一段落,有了商品,接下来我们就要在页面展示商品,给用户提供浏览和购买的入口,那就是我们的门户系统。

门户系统面向的是用户,安全性很重要,而且搜索引擎对于单页应用并不友好。因此我们的门户系统不再采用与后台系统类似的SPA(单页应用)。

依然是前后端分离,不过前端的页面会使用独立的html,在每个页面中使用vue来做页面渲染。

3.1.静态资源

webpack打包多页应用配置比较繁琐,项目结构也相对复杂。这里为了简化开发(毕竟我们不是专业的前端人员),我们不再使用webpack,而是直接编写原生的静态HTML。

3.1.1.创建工程

创建一个新的工程:
在这里插入图片描述
在这里插入图片描述

3.1.2.导入静态资源

将课前资料中的leyou-portal解压,并复制到这个项目下
在这里插入图片描述

解压缩:
在这里插入图片描述

项目结构:
在这里插入图片描述

3.2.live-server

没有webpack&#

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Java Web上开发一个网上蛋糕商城前台,主要分为用户界面设计、交互功能实现和数据展示等几个关键部分。以下是前台开发的一般实验思路: 1. **需求分析**: - 确定商城的主要功能,如商品浏览、搜索、购物车管理、订单流程(添加、确认、支付)和用户登录注册等。 - 明确界面风格,如响应式设计以适应不同设备。 2. **界面设计**: - 使用HTML/CSS构建静态页面布局,包括导航栏、轮播图、商品列表页、详情页和用户个人中心等。 - 利用Bootstrap或其他前端框架进行快速样式搭建。 3. **JavaScript或jQuery**: - 实现动态效果,如图片轮播、下拉菜单、按钮点击事件处理等。 - 利用AJAX异步加载数据,提升用户体验,避免页面刷新。 4. **UI组件化**: - 使用前端框架提供的组件库,比如React、Vue或Angular,提高开发效率并保证代码复用。 5. **用户认证与权限管理**: - 使用session或JWT进行用户身份验证,确保用户只能访问自己的数据。 - 设计用户权限系统,如管理员能查看和修改所有数据,普通用户只能查看和购买。 6. **数据绑定和模型驱动**: - 如果使用MVVM架构,如Angular,利用双向数据绑定连接视图和模型。 7. **前端状态管理**: - 使用Redux或Vuex管理应用状态,保证状态的一致性和可预测性。 8. **SEO优化**: - 为搜索引擎优化考虑,确保页面元素有正确的元信息和结构。 9. **性能优化**: - 压缩和合并CSS/JS文件,减少HTTP请求。 - 利用CDN加速资源加载。 10. **测试**: - 编写单元测试和集成测试,确保各个功能正常工作。 - 进行用户验收测试,收集用户反馈。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值