淘先锋技术网

首页 1 2 3 4 5 6 7

一、前端部分:

技术栈:react,react-bootstrap

思路:

  1. 在使用npm init建立起来的node项目中创建文件夹建立前端,这是前后端不分离,前后端分离也差不多就这样
  2. 将react初始项目src文件夹中文件大部分删除,留下app.js,index.js,index.css,reportWebVitals
  3. 下载react-bootstrap,并引入文件bootstrap.min.css
  4. 下载react-router-dom,在入口文件App.js中引入路由,使得<Router>置于app.js的return中最高
    import React from "react";
    import { BrowserRouter as Router,Route } from "react-router-dom";
    import Header from "./components/Header";
    import Footer from "./components/Footer";
    import { Container } from "react-bootstrap";
    import HomeScreen from "./screens/HomeScreen";
    import ProductScreen from "./screens/ProductScreen";
    function App() {
      return (
        <Router>
          <Header />
          <main className="py-3">
            <Container>
              <Route path='/'  component={HomeScreen} exact />
              <Route path='/products/:id'  component={ProductScreen} exact />
            </Container>
          </main>
          <Footer />
        </Router>
      );
    }
    
    export default App;
    
  5. 建立components文件夹放组件,建立screens文件夹放页面
  6. 对于一个网站的设计,头部header和底部footer组件必不可少,而且这两部分不会随着页面的跳转而消失,上面app.js中的代码将route放在了main标签中,也就是这个意思
  7. 对于在商城中的每一件商品,我们在点击相应的按钮后跳转的实际都是ProductScreen这一个页面,改变的只是页面的商品数据,所以我们在前端项目中需要下载axios,并在页面的代码中引入axios发起get请求,请求数据代码如下:
  8. const [product, setProduct] = useState([]);
        useEffect(() => {
          const fetchProduct = async () => {
            const { data } = await axios.get(`/api/products/${match.params.id}`);
            setProduct(data);
          };
          fetchProduct();
        }, []);
    
  9. 为了快速搭建前端,我们往往会引用风格库,如font-awesome


二、后端部分:

技术栈:express,mongoDB

思路:

  1. 后端需要连接数据库,我们这里使用的是mongoDB,下载mongoDB之后,我们需要配置db
  2. const mongoose = require('mongoose');
    
    const connectDB=async()=>{
        try{
            const conn =await mongoose.connect(process.env.MONGO_URL,
            {useUnifiedTopology:true,
            useNewUrlParser:true,
            }
            )
            console.log(`MongoDB Connected: ${conn.connection.host}`);
        }catch(error){
            console.log(`Error: ${error.message}`);
            process.exit(1);
        }
    }
    
    module.exports=connectDB
    
  3. 配置完db之后我们在server.js中就可以引入db.js,从而连接数据库
  4. 服务器的搭建就不细说了,在我之前的blog讲过node搭建服务器
  5. 在目前项目的第一部分,我们没有大量数据去支撑这个数据库,所以我们使用在前端搭建阶段使用的例子数据,也就是编的数据,我们需要把这个数据放到常见的mongoDB数据库中去,在这个情况下,我们需要创建我们自己的数据模板,就是说你自己需要什么样模式的数据,你将数据的格式写在这个model文件中
  6. const mongoose = require('mongoose');
    
    const reviewSchema=mongoose.Schema({
        name:{
            type:String,
            required:true,
    
        },
        rating:{
            type:Number,
            required:true,
    
        },
        comment:{
            type:String,
            required:true,
    
        },
    })
    
    const productSchema=mongoose.Schema({
        user:{
            type:mongoose.Schema.Types.ObjectId,
            required:true,
            ref:'User'
        },
        image:{
            type:String,
            required:true,
            unique:true
        },
        brand:{
            type:String,
            required:true,
        },
        reviews:[reviewSchema],
        category:{
            type:String,
            required:true,
        },
        price:{
            type:Number,
            required:true
        },
        description:{
            type:String,
            required:true,
        },
        rating:{
            type:Number,
            required:true,
            default:0
        },
        numReviews:{
            type:Number,
            required:true,
            default:0
    
        },
        countInStock:{
            type:Number,
            required:true,
            default:0
    
        }
    },{
        timestamps:true
    })
    
    const Product=mongoose.model('Product',productSchema);
    module.exports=Product
    
  7. 上面代码是product的model代码,有了这个之后,我们需要创建seeder.js来将已有的样子数据以模板的方式放入数据库或者销毁数据
  8. const mongoose = require('mongoose');
    const users = require('./data/users.js');
    const dotenv = require('dotenv');
    const products = require('./data/products.js');
    const User = require('./models/userModel.js');
    const Product = require('./models/productModel.js');
    const Order =require("./models/orderMode")
    const connectDB = require('./config/db.js');
    
    dotenv.config();
    
    connectDB();
    
    const importData = async () => {
      try {
        await Order.deleteMany();
        await Product.deleteMany();
        await User.deleteMany();
    
        const createdUsers = await User.insertMany(users);
        const adminUser = createdUsers[0]._id
    
        const sampleProducts = products.map(product => {
          return { ...product, user: adminUser }
        })
    
        await Product.insertMany(sampleProducts)
        console.log('Data Imported!');
        process.exit();
      } catch (error) {
        console.error(`${error}`);
        process.exit(1);
      }
    }
    
    const destroyData = async () => {
      try {
        await Order.deleteMany();
        await Product.deleteMany();
        await User.deleteMany();
    
        console.log('Data Destroyed');
        process.exit();
      } catch (error) {
        console.error(`${error}`);
        process.exit(1);
      }
    }
    
    if(process.argv[2] === '-d') {
      destroyData();
    } else {
      importData();
    }