Squirrel, campus second-hand trading platform


Project Origin:

In the course design of the final term, I made up a group of three. Two roommates and I decided to build a second-hand trading platform on campus. At the beginning, we were full of interest and passion, but the later time conflict made the three of us a little tired for this project. It was just two days after the project was decided. BezosLee had passed 360’s online written test and received a free training invitation from 360 company, so she had to go to 360 headquarters in Beijing for a week of training. Fortunately, after the training, she had an interview and got the internship Offer. At the end of April, L_75 had a one-week ACM training to prepare for the Shandong ACM competition on May 9. Fortunately, as his retirement competition, he won a bronze medal. As for me, I am preparing for the postgraduate entrance examination. Besides the volleyball training at 6:00 am every day for the school volleyball league at the end of May, I also need to study English and advanced mathematics every day. But I’m sure the three of us will do well, do what we want, do what we love.


System architecture:

IntelliJ IDEA, Atom, Navicat for MySQL

  • Spring + for SpringMVC + Mybatis, Maven
  • JavaScript+Jquery+React

Developer: L-75, HLK_1135, BezosLee Project division: modular development according to functions, each responsible module should take into account front-end and background. Squirrel Campus second-hand transaction

Note: front page imitation of fudan University second-hand trading platform: Fudan University second-hand workshop


I. System requirements:

In today’s university campuses, with the improvement of students’ purchasing ability and the annual admission and graduation, there are many types of second-hand goods. At present, second-hand commodity trading has become a popular after-school life of contemporary college students. Taking our school as an example, the “flea” market is held every year, which shows the demand of college students for second-hand goods trading. However, this way has many limitations and contingency, which is far from meeting the demand of students.

The establishment of a campus second-hand trading platform can greatly facilitate students in school, convenient students also create a glorious saving, waste shameful campus cultural atmosphere. The most important is that it can also through the network will not use their own things on the Internet, can also find their own needs on the Internet, inexpensive, to achieve a win-win situation.

  

               System use case diagrams

               


Ii. Functional module design:

1. Design of login registration module

1.1 Login Module

When the user clicks the login button on the main page, the js control in the foreground will pop up a login suspension window and fill in the mobile phone number and password for login. After clicking login, the user will request the UserController and invoke the loginValidate() method to encrypt the password with MD5The databaseAfter the match is successful, the user information is added to the session session, and the page clicked for login is redirected according to the Referer in the request header information.

  

1.2 Registration Module

Click the registration button in the home page or login box, and the registration box will pop up. The registered login number is the mobile phone number. The system will verify the data, and you can register and log in if the data is correct.

  

  


2. Personal center module

2.1 Personal Information setting module

After successful login, users can enter the personal center. Newly registered users can improve their information on the personal Settings page, or modify information on this page, but the opening time and mobile phone number cannot be changed.

  

2.2 My idle items module

Each user has his or her own published idle items. In the personal center module, you can view the published idle items and delete and modify the corresponding items. The GoodsExtand class is introduced because objects and images have a one-to-many relationship.

public class GoodsExtend {
    private Goods goods;
    private List<Image> images = new ArrayList<Image>();
    /** omit the getter/setter method */
}Copy the code

This module is to get all the commodity information published by the user. Obtain the user information from session, query the commodities released by the user according to the user ID, obtain the corresponding picture information of the commodities according to the commodity ID, and finally return the associated objects of the commodities and pictures, as well as the corresponding commodity information and picture information to the foreground for display.

@RequestMapping(value = "/allGoods")
public ModelAndView goods(HttpServletRequest request) {
    User cur_user = (User)request.getSession().getAttribute("cur_user");
    Integer userId = cur_user.getId();
    List<Goods> goodsList = goodsService.getGoodsByUserId(userId);
    List<GoodsExtend> goodsAndImage = new ArrayList<GoodsExtend>();
    for (int i = 0; i < goodsList.size() ; i++) {
        // Encapsulate the user information and image information into the GoodsExtend class and pass it to the foreground
        GoodsExtend goodsExtend = new GoodsExtend();
        Goods goods = goodsList.get(i);
        List<Image> images = imageService.getImagesByGoodsPrimaryKey(goods.getId());
        goodsExtend.setGoods(goods);
        goodsExtend.setImages(images);
        goodsAndImage.add(i, goodsExtend);
    }
    ModelAndView mv = new ModelAndView();
    mv.addObject("goodsAndImage",goodsAndImage);
    mv.setViewName("/user/goods");
    return mv;
}Copy the code

  

2.3 Release idle items module

To release commodity information, fill in the corresponding commodity text information and upload the picture information of the commodity. To upload image information, the foreground needs to pass in an object of file type. According to this object, the physical path of uploading the image is extracted, the image is saved to the disk, and the name of the new image is returned to the front end for display. If the picture is illegal, the message will be returned to remind the front desk that the picture is illegal.

@ResponseBody
@RequestMapping(value = "/uploadFile")
public  Map<String,Object> uploadFile(HttpSession session,MultipartFile myfile) throws IllegalStateException, IOException{
    String oldFileName = myfile.getOriginalFilename(); // Get the original name of the uploaded file
    // The physical path to store the image
    String file_path = session.getServletContext().getRealPath("upload");
    if(myfile! =null && oldFileName! =null && oldFileName.length()>0) {String newFileName = UUID.randomUUID() + oldFileName.substring(oldFileName.lastIndexOf("."));
        File newFile = new File(file_path+"/"+newFileName);
        myfile.transferTo(newFile); // Write data in memory to disk
        Map<String,Object> map=new HashMap<String,Object>(a);// Return the new image name to the front end
        map.put("success"."It worked.");
        map.put("imgUrl",newFileName);
        return  map;
    }else{
        Map<String,Object> map=new HashMap<String,Object>(a);map.put("error"."Picture is illegal.");
        return map; }}Copy the code

The commodity information and picture information are transmitted to the background, and the background obtains the user information in the session, sets the user’s foreign key association for the commodity, and inserts the commodity information in the GOODS table. After inserting the product information, obtain the ID of the item, set the foreign key association of the product for the picture, and insert the corresponding image information in the image table. Then change the user’s information, increase the quantity of goods published by the user by 1, and update the quantity of all goods in the category table. Finally, modify the value of the user in session.

@RequestMapping(value = "/publishGoodsSubmit") public String publishGoodsSubmit(HttpServletRequest request,HttpServletResponse response,Image ima,Goods Goods,MultipartFile image) throws Exception {// Queries the current User cur_user object, facilitating the use of ID User cur_user = (User)request.getSession(a).getAttribute("cur_user");
    goods.setUserId(cur_user.getId());
    int i = goodsService.addGood(goods,10); // Insert an item in the goods table// return the id of the inserted item int goodsId = goods.getId(a);
    ima.setGoodsId(goodsId);
    imageService.insert(ima); // Insert an image of an item into the image table// The number of catlog + after publishing the item1, goods_num+ for the user table1Integer calelog_id = goods.getCatelogId(a);
    catelogService.updateCatelogNum(calelog_id);
    userService.updateGoodsNum(cur_user.getId());
    cur_user.setGoodsNum(cur_user.getGoodsNum() +1);
    request.getSession(a).setAttribute("cur_user",cur_user); // Change the session value
    return "redirect:/user/allGoods";
}Copy the code


3. Goods module

3.1 Product home page module

The home page of the commodity display page, namely the main page of the system, includes the classification of goods, navigation bar, commodity release, login and registration, message notification, commodity search bar, and the latest information of six commodities displayed in each category of the page.

  

3.2 Commodity search module (support classified search and fuzzy search)

On the main page of the system, the items are divided into 7 categories, such as the latest release, idle digital, campus transport, electrical appliances and daily use, books and teaching materials, cosmetics and clothing, sports chess and cards, tickets and small objects. Click the classification name, request the background, the background database of goods for the classification of foreign key query, the commodity information returned to the page, the page will jump to show the corresponding classification of commodity information.

  

At the top of the home page, a search box is added. If you enter the keyword in the search box, the background will be requested. The background will query the name and description in the commodity list according to the keyword, query the commodity with the keyword and the picture information of the object, and return to the foreground to display the corresponding commodity information, such as query: Book, you can query the goods of the book, and avoid the error that the name of the goods does not take the word “book”.

  

Click classification, can be achieved under the classification, query the corresponding commodity information, in the classification, also can be fuzzy query, but in the classification of fuzzy, matching is catelog_id, and then match the name and describle in the category, for example, in the campus walk classification input: Emma, the query is the campus under the “Emma” commodity information.

  

  

@RequestMapping(value = "/catelog/{id}")
public ModelAndView catelogGoods(HttpServletRequest request,@PathVariable("id") Integer id,
                                 @RequestParam(value = "str",required = false) String str) throws Exception {
    List<Goods> goodsList = goodsService.getGoodsByCatelog(id,str,str);
    Catelog catelog = catelogService.selectByPrimaryKey(id);
    List<GoodsExtend> goodsExtendList = new ArrayList<GoodsExtend>();
    for(int i = 0; i<goodsList.size(); i++) { GoodsExtend goodsExtend =new GoodsExtend();
        Goods goods = goodsList.get(i);
        List<Image> imageList = imageService.getImagesByGoodsPrimaryKey(goods.getId());
        goodsExtend.setGoods(goods);
        goodsExtend.setImages(imageList);
        goodsExtendList.add(i,goodsExtend);
    }
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.addObject("goodsExtendList", goodsExtendList);
    modelAndView.addObject("catelog", catelog);
    modelAndView.addObject("search",str);
    modelAndView.setViewName("/goods/catelogGoods");
    return modelAndView;
}Copy the code
3.3 Click the commodity details module

On the product display page, click the product picture to view the detailed information of the product. By default, merchants’ information cannot be viewed when they are not logged in. Only after logging in, can the corresponding merchants’ contact information be viewed. After the user clicks on the product, the user first requests the background to conduct a filtering of whether to log in. Then the background queries the detailed information of the product, multiple pictures of the product, seller’s information and so on, and returns to the front desk for display.

  

  


4. System administrator module

4.1 User management module

Use ant-Design UI to implement enterprise management console solutions. The management console, as a subsystem, shows the functions of user management and commodity management. The following is a screenshot of the user management page, which shows the data intuitively in the form of tables, and supports multi-condition query, jump page and other functions. Each row of the table has action items, including update and delete functions.

  

The dialog box pops up when you click modify. There is a mask on the lower layer of the dialog box. This mask can prevent the wrong operation on the page when you launch an asynchronous request. The update dialog box displays the existing data and verifies the input data. If the input is correct, the correct prompt will appear. Click OK to initiate a request to synchronize to the database.

  

4.2 Commodity Management module

Commodity management module also adopts the form of tables, supporting multi-condition query, paging, view details and other operations, the difference is that commodity information can not be modified but can be deleted. Click the name of the product to enter the details page, showing all the data of the product.

  


Iii. Summary:

1) Summary of second-hand platforms

The Squirrel Workshop has realized the basic functions of a second-hand transaction platform on campus. Since alipay’s payment interface cannot be introduced, offline transactions can only be carried out, which adds a lot of difficulties to the management of goods and the transactions between sellers and buyers. Although the platform has no special functions, we have achieved it with the efforts of the three of us. Although there is a gap with the initial expectation, we are still satisfied.

2) Future function expansion:

1) A comment box is reserved on the product detail page. The product and comment are one-to-many, and the comment and reply are one-to-many. 2) The homepage of the personal center is reserved for chat and communication of the forum. 3) Online payment function 4) Online chat function