Vue + node + mongodb with payment, junior internship

Time:2021-7-7

about

Some time ago, junior students in 2019 always wanted to develop a relatively complete project by themselves. In many applications, they chose meituan takeout to imitate. During this period, they used their spare time to develop. The front-end uses Vue + vuex + Vue router + Axios, because they need to use positioning and payment functions, need back-end cooperation, and want to do real data interaction, So express (based on nodejs framework) is used as the background, and mongodb of NoSQL is used as the database. The front-end project contains more than 20 routes, involving 40 Vue files, function design login, location, browse goods, shopping cart, order, payment (support for WeChat and Alipay‘s scan code payment and tune up app payment), evaluation, personal information change is a more complete project.

Note: this project is for personal development practice, not for any commercial use

Let’s talk about the important things first

I’m looking for Guangshen internship. Now I can go to work (summer vacation is also required). I can work more than 4 days a week

function

  • Login / logout
  • IP location
  • Search address
  • Get store (calculate distance between current location and store)
  • Add shopping cart
  • Place an order
  • Payment (support for WeChat and Alipay’s sweep code payment and app payment)
  • evaluate
  • Avatar upload (using 7niu cloud storage)
  • Image lazy loading

Technology stack

  • Webpack cli build project
  • Vue + vuex + Vue router
  • CSS preprocessor SCSS
  • Axios and the back end request data
  • Scrolling with better scroll
  • Seven cattle cloud storage pictures
  • Alipay and WeChat pay
  • Express builds back end services
  • Convenient operation of mongoose to mongodb
  • Using Charles to grab data

Multi map early warning

Vue + node + mongodb with payment, junior internship

Locating and searching businesses

Vue + node + mongodb with payment, junior internship

Payment by scanning code

Vue + node + mongodb with payment, junior internship

Transfer app payment

Vue + node + mongodb with payment, junior internship

Shopping Cart

Vue + node + mongodb with payment, junior internship

Commodity Operation

Vue + node + mongodb with payment, junior internship

comment

Vue + node + mongodb with payment, junior internship

Other operations

Vue + node + mongodb with payment, junior internship

There are also some other functions that will not be shown

Online address

Please use Google browser and open the mobile terminal. If you want to call app payment, you need to open it with the browser of your mobile phone, and then choose to call app payment when you pay

Online address

Warehouse address

The code has been open source to GitHub, with specific operation. If you think it's OK, please give it to star ha ha!

GitHub address

To be continued

There are also business management PC end has not finished, and then open source

Write at the end

Because I’m still a student, I usually develop with my classmates at most, and I haven’t participated in the real enterprise team development, so there should be a lot of things that I don’t do very well. Welcome to give me some suggestions. Finally, I’d like to ask you a question. Now I can start to work (it’s OK to go to work in summer vacation), and guarantee more than 4 working days a week. If not, I’ll ask later…