# CampusO2OUserView

**Repository Path**: CampusO2OView/CampusO2OUserView

## Basic Information

- **Project Name**: CampusO2OUserView
- **Description**: 【校园二手平台-v1】基于JS、CSS的前端页面开发
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://www.choisaaaa.shop
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-04-01
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## 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的配置
```js
    //dev
    serverHost : ''

    //prod
    // serverHost : 'http://www.choisaaaa.campuso2o.com'
```
6. 修改webpack.config.js的配置
```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

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

#### 打包步骤
1. 修改src\util\mm.js的配置，选择prod的代码
```js
    //dev
    serverHost : ''

    //prod
    // serverHost : 'http://www.choisaaaa.campuso2o.com'
```
2. 修改webpack.config.js的配置，选择prod的代码
```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

            }
        }
```
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