1 Star 0 Fork 0

CampusO2O / CampusO2OUserView

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

Campuso2oUserView

项目介绍

校园二手交易平台的前端用户页面的开发

技术架构

使用webpack+npm+html+css+js开发

本地启动步骤

  1. 首先安装npm或者yarn
  2. 然后安装项目中的依赖模块,详情请看根目录下的package.json文件,
  3. 安装依赖包时注意版本号以及环境的选择(--dev)
  4. 运行npm i --registry=https://registry.npm.taobao.org命令进行安装,--registry=https://registry.npm.taobao.org指定国内的仓库,加快下载速度
  5. 修改src\util\mm.js的配置
    //dev
    serverHost : ''

    //prod
    // serverHost : 'http://www.choisaaaa.campuso2o.com'
  1. 修改webpack.config.js的配置
    devServer: {
        port: 8089,
        inline: true,
        proxy : {
            //pro环境中使用下面的配置
            // '/image/richtext_img_upload.do' : {
            //     target: 'http://www.choisaaaa.campuso2o.com/',
            //     changeOrigin : true
            // }

            // dev开发使用下面的配置
              '**/*.do' : {
                // 这个域名是开发时配置的域名,其实是通过修改host文件,让www.dev.campuso2o.com访问请求到本地
                // 再通过nginx将这个请求代理到本地的不同tomcat(分布式部署)中
                // 注:如果是但实例部署,可以配置 : target: 'http://localhost:8088/campusO2O/(本地后台项目的访问路径)',
                target: 'http://www.dev.campuso2o.com/campuso2o/',
                changeOrigin : true

            }
        }
    }
  1. 运行命令 windowx下:npm run dist_win,会在项目中生成dist文件夹
  2. 运行命令 window下:npm run dev_win,以webpack-dev-server启动项目
  3. 更多的运行命令请查看 package.json 文件
  4. 打开浏览器输入:http://127.0.0.1:8089/dist/view/

打包步骤

  1. 修改src\util\mm.js的配置,选择prod的代码
    //dev
    serverHost : ''

    //prod
    // serverHost : 'http://www.choisaaaa.campuso2o.com'
  1. 修改webpack.config.js的配置,选择prod的代码
    devServer: {
        port: 8089,
        inline: true,
        proxy : {
            //pro环境中使用下面的配置
            // '/image/richtext_img_upload.do' : {
            //     target: 'http://www.choisaaaa.campuso2o.com/',
            //     changeOrigin : true
            // }

            // dev开发使用下面的配置
              '**/*.do' : {
                // 这个域名是开发时配置的域名,其实是通过修改host文件,让www.dev.campuso2o.com访问请求到本地
                // 再通过nginx将这个请求代理到本地的不同tomcat(分布式部署)中
                // 注:如果是但实例部署,可以配置 : target: 'http://localhost:8088/campusO2O/(本地后台项目的访问路径)',
                target: 'http://www.dev.campuso2o.com/campuso2o/',
                changeOrigin : true

            }
        }

3.window系统运行npm run dist_win,生成的dist文件,为前端打包的项目。 4.部署到web服务器中(nginx、tomcat)

目录结构说明一下目录都是在src目录下

1. image(存放图片资源)
2. page(每个模块的页面渲染的内容)

每一个的模块中的页面包括一个css文件,一个js文件,一个.string(渲染模板)

3. service(调用服务器接口)
4. util(工具类)
4. view(原始的html页面)

****.html: 每个模块对应的页面

4.1. src/view/layout :布局的页面(页头,页尾,侧边导航栏的抽取)

4.2. src/view/seller :卖家的涉及页面

版本

node: v12.16.1 npm: 6.13.4

version1.0

待优化的问题

  1. 页面优化

  2. 图片资源加载过慢

  3. 如果刷新过快的会看到没有渲染CSS样式的页面

帮助开发的网址

  1. Yarn中文地址 https://yarn.bootcss.com/
  2. React地址 https://reactjs.org/
  3. simditor富文本编辑器 http://simditor.tower.im/
  4. React file-upload https://www.npmjs.com/package/react-fileupload

空文件

简介

【校园二手平台-v1】基于JS、CSS的前端页面开发 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/CampusO2OView/CampusO2OUserView.git
git@gitee.com:CampusO2OView/CampusO2OUserView.git
CampusO2OView
CampusO2OUserView
CampusO2OUserView
master

搜索帮助