Rodney Vg

Rodney Vg

1595700480

Build a large single page application with 45 pages based on vue2 + vuex

Introduction

When I began to learn to vue, search of some practical source code about vue, but most of them are simple demo and didn’t help to explore the vue. The most of demo are front-end page, such as music player interaction not as complicated as expected.But in actual work, we often meet some project involving money, such as shopping cart page. This kind of project is complex, accompany by login, register ,user information and so on. It’s difficult, no one has ever written a project like this in vue and commit to github. So I write it, hope I can help you.

This functional project is practical but often boring, with no music player so gorgeous. For a long time, I think that Elm APP is a good material. First, it is complex that the open delivery platform is more complicated than the typical project. Second, you won’t get bored seeing so much beautiful food.

But why is the Elm APP, not Baidu App or Meituan App? The reason is simple, that Elm’s layout is the most beautiful and the most comfortable in the three APP.

There are 45 pages of this project, involving registration, login, merchandise display, shopping cart, order and so on. It is a complete process. The average company project is not that complicated, so if you can understand this project fully, I believe that you can able to do the most of single-page applications in the other company. Even if it’s more complex, and it won’t be much higher than this one.

The project was done in the spare time, actually it was written years ago and over the years, so the spend time seem a bit long. The project spend more than two months from beginning to end. Now it has been completed, some performance optimizations are being performed to add detailed annotations.

In addition, the project don’t related elm video of imooc website, and that project only have one page. After watching the official documentation of vue, I wrote this project directly, and without reference to any code, so please don’t mix them up.

Note: This project is purely personal. If you want to order, please choose the official elm client.

Technology

vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg

Development

Note:This project used a lot of properties such as ES6/7, so node 6.0.0+ is required.

git clone https://github.com/bailicangdu/vue2-elm.git  

cd vue2-elm

npm install

npm run dev

More

This project has the supporting background system. If you want to develop it, you can download the corresponding backend system.backend system

Backend system’s run command:npm run local .

If you only do the front-end development, ignore this note.

Explain

If it helps you, you can click “Star” in the upper right corner to support,thank you. ^_^

May be you can “follow” me, I will make more interstng projects.

Development environment: macOS 10.12.3 Chrome 56  nodejs 6.10.0

Thanks for 辰妹子@bailichen, @iceRao,to help complete the project,thank you

If you hava some question,you can post the question in Issues, and if you find some solution or some improvement,please pull request.

communication group

Recommend a open source project about react and redux。address

Recommend a other demo about vue2 and vuex,it’s simple and good for newbie.address

Dscription of the data interface

2017-05-30

For some reason,previous interfaces could not be used, it made the project failed to run.The new backend system is built by nodejs.backend system address. It can kept consisent with the offical website. And provide corresponding background management system

Demo

click it(Preview with chrome phone mode please)

Features

  • [x] location function – finished
  • [x] choose city – finished
  • [x] search address-- finished
  • [x] display a list of merchant that near by the selected address – finished
  • [x] find food or restaurant – finished
  • [x] sorting and filter according to distance,sales,rating,special course,distribution and so on – finished
  • [x] food list of restaurant – finished
  • [x] cart function – finished
  • [x] evaluation page of shop – finished
  • [x] detail page about one food-- finished
  • [x] detail page about merchant – finished
  • [x] login、register – finished
  • [x] change password – finished
  • [x] user center – finished
  • [x] send message、voice verification – finished
  • [x] order function – finished
  • [x] order list – finished
  • [x] order detail – finished
  • [x] download App – finished
  • [x] add、delete、change delivery address – finished
  • [x] account info – finished
  • [x] service center – finished
  • [x] red packet – finished
  • [x] upload avator – finished
  • [ ] pay – No money~~

Summarize

1, It is not the official of elm, so it is necessary to open the agent, and must be opened on the PC. At most, you can order but not more, after the success of the order, you can check and pay the payment on your mobile phone.

2, In general, the page involves money that is complicated, especially like elm? An open platform, It has many types of merchants and foods, need some complex interaction between page and page. When I writing the cart and order pages, without API but it has a lot of

3, Vue is so bright, because of it’s a lightweight framework good at the small and medium-sized project. Whem you want make a large single-page application, you can use vuex, the performance is still outstanding. In the treatment of the complex interaction logic page, vuex is necessary. So if you use vue and vuex, you can make large single-page projects.

4, Now, after make process of the login to register, homepage, search, businesses, shopping cart, order, order list, personal center and so on. I not only understanding the vue to a deeper level, and it’s can help for me to control the large project in the future. Do a practical project has great improvement in myself.

5, Sometimes I doubt that to spend a few months make this project has meaning or not. At first I just wanted to do a small project, but I didn’t think I could write more, but when I finished I believed it was worth it.

6, The project was already finished, and have 45 pages.

Ultimate Goal

1, Build a background system to simulate the delivery platform with node.js。address

2, Use react-native to write native APP of Android and IOS。地址在这里

3、May be I will make a seller’s version in the future.

So my goal is to build a full ecosystem across the frontend , backend, IOS and Android.

…Waiting for me

Screenshot

store list page

store filter page

food list and cart

oder check page

search page

login page

user center

Layout

.
├── build                                       // webpack config file
├── config                                      // package path
├── elm                                         // online project file,can access if put them one the server
├── screenshots                                 // screenshot
├── src                                         // source directory
│   ├── components                              // components
│   │   ├── common                              // common components
│   │   │   ├── alertTip.vue                    // popup components
│   │   │   ├── buyCart.vue                     // cart components
│   │   │   ├── computeTime.vue                 // countdown components
│   │   │   ├── loading.vue                     // the animation component when page is initialized
│   │   │   ├── mixin.js                        // mixinf components(inculde:directive-loading more,make picture address)
│   │   │   ├── ratingStar.vue                  // the five rating star component about comment
│   │   │   └── shoplist.vue                    // the resturant list common component of msite and shop page
│   │   ├── footer
│   │   │   └── footGuide.vue                   // footer common component
│   │   └── header
│   │       └── head.vue                        // header common component
│   ├── config                                  // basic configuration
│   │   ├── env.js                              // environment switch configuration
│   │   ├── fetch.js                            // git data
│   │   ├── mUtils.js                           // common function about js
│   │   └── rem.js                              // px transform rem
│   ├── images                                  // public picture
│   ├── page
│   │   ├── balance
│   │   │   ├── balance.vue                     // balance page
│   │   │   └── children
│   │   │       └── detail.vue                  // balance detail page
│   │   ├── benefit
│   │   │   ├── benefit.vue                     // benefit pahe
│   │   │   └── children
│   │   │       ├── commend.vue                 // recommend prize
│   │   │       ├── coupon.vue                  // coupon introduction
│   │   │       ├── exchange.vue                // exchange benefit
│   │   │       ├── hbDescription.vue           // benefit descripting
│   │   │       └── hbHistory.vue               // benefit's history
│   │   ├── city                 
│   │   │   └── city.vue                        // local city page
│   │   ├── confirmOrder
│   │   │   ├── children
│   │   │   │   ├── children
│   │   │   │   │   ├── addAddress.vue          // add address page
│   │   │   │   │   └── children
│   │   │   │   │       └── searchAddress.vue   // search address page
│   │   │   │   ├── chooseAddress.vue           // choose address page
│   │   │   │   ├── invoice.vue                 // choose invoice page
│   │   │   │   ├── payment.vue                 // pay page
│   │   │   │   ├── remark.vue                  // order remark page 
│   │   │   │   └── userValidation.vue          // user validation page
│   │   │   └── confirmOrder.vue                // confirm order page
│   │   ├── download
│   │   │   └── download.vue                    // downlad App
│   │   ├── find
│   │   │   └── find.vue                        // find page
│   │   ├── food
│   │   │   └── food.vue                        // food filter sort page
│   │   ├── forget
│   │   │   └── forget.vue                      // forget password, change password
│   │   ├── home
│   │   │   └── home.vue                        // index page
│   │   ├── login
│   │   │   └── login.vue                       // login and register page
│   │   ├── msite
│   │   │   └── msite.vue                       // merchant list page
│   │   ├── order
│   │   │   ├── children
│   │   │   │   └── orderDetail.vue             // order detail page
│   │   │   └── order.vue                       // order list page
│   │   ├── points
│   │   │   ├── children
│   │   │   │   └── detail.vue                  // points detail page
│   │   │   └── points.vue                      // points page
│   │   ├── profile
│   │   │   ├── children
│   │   │   │   ├── children
│   │   │   │   │   ├── address.vue             // address page
│   │   │   │   │   └── children
│   │   │   │   │       ├── add.vue             // add address page
│   │   │   │   │       └── children
│   │   │   │   │           └── addDetail.vue   // search address page
│   │   │   │   ├── info.vue                    // account info page
│   │   │   │   └── setusername.vue             // reset user page
│   │   │   └── profile.vue                     // user profile page
│   │   ├── search
│   │   │   └── search.vue                      // search page
│   │   ├── service
│   │   │   ├── children
│   │   │   │   └── questionDetail.vue          // question detail page
│   │   │   └── service.vue                     // service center page
│   │   ├── shop
│   │   │   ├── children
│   │   │   │   ├── children
│   │   │   │   │   └── shopSafe.vue            // shop check info page
│   │   │   │   ├── foodDetail.vue              // food detail page
│   │   │   │   └── shopDetail.vue              // shop detail page
│   │   │   └── shop.vue                        // shop filter page
│   │   └── vipcard
│   │       ├── children
│   │       │   ├── invoiceRecord.vue           // invoice record page
│   │       │   ├── useCart.vue                 // use card page
│   │       │   └── vipDescription.vue          // vip deacription page
│   │       └── vipcard.vue                     // vip handling page
│   ├── plugins                                 // plugins
│   ├── router
│   │   └── router.js                           // router configuration
│   ├── service                                 // data interaction and unified deployment
│   │   ├── getData.js                          // the unified deployment file for get data, and unified management of interfaces
│   │   └── tempdata                            // temporary data for the development
│   ├── store                                   // Vuex status management
│   │   ├── action.js                           // actions configuration
│   │   ├── getters.js                          // getters configuration
│   │   ├── index.js                            // use vuex,new store
│   │   ├── modules                             // store modules
│   │   ├── mutation-types.js                   // make const for muations
│   │   └── mutations.js                        // mutations configuration
│   └── style
│       ├── common.scss                         // common css
│       ├── mixin.scss                          // cs configuration file
│       └── swiper.min.css
│   ├── App.vue                                 // entry page js file
│   ├── main.js                                 // the main js for loading components
├── favicon.ico                                 // icon
├── index.html                                  // entry page html file
.

56 directories, 203 files

Download Details:

Author: bailicangdu

Live Demo: http://cangdu.org/elm/

GitHub: https://github.com/bailicangdu/vue2-elm

#vuejs #javascript #vue #vue-js

What is GEEK

Buddha Community

Build a large single page application with 45 pages based on vue2 + vuex

Paresh Sagar

1581940975

What Is A Single-Page Application?

Single page web apps are an ideal choice when thinking about future web development. This architecture is a perfect choice for social networks stuff, SaaS platforms, or some close communities where SEO doesn’t matter.

#what is a single page application #single page application #single page application development

Rodney Vg

Rodney Vg

1595700480

Build a large single page application with 45 pages based on vue2 + vuex

Introduction

When I began to learn to vue, search of some practical source code about vue, but most of them are simple demo and didn’t help to explore the vue. The most of demo are front-end page, such as music player interaction not as complicated as expected.But in actual work, we often meet some project involving money, such as shopping cart page. This kind of project is complex, accompany by login, register ,user information and so on. It’s difficult, no one has ever written a project like this in vue and commit to github. So I write it, hope I can help you.

This functional project is practical but often boring, with no music player so gorgeous. For a long time, I think that Elm APP is a good material. First, it is complex that the open delivery platform is more complicated than the typical project. Second, you won’t get bored seeing so much beautiful food.

But why is the Elm APP, not Baidu App or Meituan App? The reason is simple, that Elm’s layout is the most beautiful and the most comfortable in the three APP.

There are 45 pages of this project, involving registration, login, merchandise display, shopping cart, order and so on. It is a complete process. The average company project is not that complicated, so if you can understand this project fully, I believe that you can able to do the most of single-page applications in the other company. Even if it’s more complex, and it won’t be much higher than this one.

The project was done in the spare time, actually it was written years ago and over the years, so the spend time seem a bit long. The project spend more than two months from beginning to end. Now it has been completed, some performance optimizations are being performed to add detailed annotations.

In addition, the project don’t related elm video of imooc website, and that project only have one page. After watching the official documentation of vue, I wrote this project directly, and without reference to any code, so please don’t mix them up.

Note: This project is purely personal. If you want to order, please choose the official elm client.

Technology

vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg

Development

Note:This project used a lot of properties such as ES6/7, so node 6.0.0+ is required.

git clone https://github.com/bailicangdu/vue2-elm.git  

cd vue2-elm

npm install

npm run dev

More

This project has the supporting background system. If you want to develop it, you can download the corresponding backend system.backend system

Backend system’s run command:npm run local .

If you only do the front-end development, ignore this note.

Explain

If it helps you, you can click “Star” in the upper right corner to support,thank you. ^_^

May be you can “follow” me, I will make more interstng projects.

Development environment: macOS 10.12.3 Chrome 56  nodejs 6.10.0

Thanks for 辰妹子@bailichen, @iceRao,to help complete the project,thank you

If you hava some question,you can post the question in Issues, and if you find some solution or some improvement,please pull request.

communication group

Recommend a open source project about react and redux。address

Recommend a other demo about vue2 and vuex,it’s simple and good for newbie.address

Dscription of the data interface

2017-05-30

For some reason,previous interfaces could not be used, it made the project failed to run.The new backend system is built by nodejs.backend system address. It can kept consisent with the offical website. And provide corresponding background management system

Demo

click it(Preview with chrome phone mode please)

Features

  • [x] location function – finished
  • [x] choose city – finished
  • [x] search address-- finished
  • [x] display a list of merchant that near by the selected address – finished
  • [x] find food or restaurant – finished
  • [x] sorting and filter according to distance,sales,rating,special course,distribution and so on – finished
  • [x] food list of restaurant – finished
  • [x] cart function – finished
  • [x] evaluation page of shop – finished
  • [x] detail page about one food-- finished
  • [x] detail page about merchant – finished
  • [x] login、register – finished
  • [x] change password – finished
  • [x] user center – finished
  • [x] send message、voice verification – finished
  • [x] order function – finished
  • [x] order list – finished
  • [x] order detail – finished
  • [x] download App – finished
  • [x] add、delete、change delivery address – finished
  • [x] account info – finished
  • [x] service center – finished
  • [x] red packet – finished
  • [x] upload avator – finished
  • [ ] pay – No money~~

Summarize

1, It is not the official of elm, so it is necessary to open the agent, and must be opened on the PC. At most, you can order but not more, after the success of the order, you can check and pay the payment on your mobile phone.

2, In general, the page involves money that is complicated, especially like elm? An open platform, It has many types of merchants and foods, need some complex interaction between page and page. When I writing the cart and order pages, without API but it has a lot of

3, Vue is so bright, because of it’s a lightweight framework good at the small and medium-sized project. Whem you want make a large single-page application, you can use vuex, the performance is still outstanding. In the treatment of the complex interaction logic page, vuex is necessary. So if you use vue and vuex, you can make large single-page projects.

4, Now, after make process of the login to register, homepage, search, businesses, shopping cart, order, order list, personal center and so on. I not only understanding the vue to a deeper level, and it’s can help for me to control the large project in the future. Do a practical project has great improvement in myself.

5, Sometimes I doubt that to spend a few months make this project has meaning or not. At first I just wanted to do a small project, but I didn’t think I could write more, but when I finished I believed it was worth it.

6, The project was already finished, and have 45 pages.

Ultimate Goal

1, Build a background system to simulate the delivery platform with node.js。address

2, Use react-native to write native APP of Android and IOS。地址在这里

3、May be I will make a seller’s version in the future.

So my goal is to build a full ecosystem across the frontend , backend, IOS and Android.

…Waiting for me

Screenshot

store list page

store filter page

food list and cart

oder check page

search page

login page

user center

Layout

.
├── build                                       // webpack config file
├── config                                      // package path
├── elm                                         // online project file,can access if put them one the server
├── screenshots                                 // screenshot
├── src                                         // source directory
│   ├── components                              // components
│   │   ├── common                              // common components
│   │   │   ├── alertTip.vue                    // popup components
│   │   │   ├── buyCart.vue                     // cart components
│   │   │   ├── computeTime.vue                 // countdown components
│   │   │   ├── loading.vue                     // the animation component when page is initialized
│   │   │   ├── mixin.js                        // mixinf components(inculde:directive-loading more,make picture address)
│   │   │   ├── ratingStar.vue                  // the five rating star component about comment
│   │   │   └── shoplist.vue                    // the resturant list common component of msite and shop page
│   │   ├── footer
│   │   │   └── footGuide.vue                   // footer common component
│   │   └── header
│   │       └── head.vue                        // header common component
│   ├── config                                  // basic configuration
│   │   ├── env.js                              // environment switch configuration
│   │   ├── fetch.js                            // git data
│   │   ├── mUtils.js                           // common function about js
│   │   └── rem.js                              // px transform rem
│   ├── images                                  // public picture
│   ├── page
│   │   ├── balance
│   │   │   ├── balance.vue                     // balance page
│   │   │   └── children
│   │   │       └── detail.vue                  // balance detail page
│   │   ├── benefit
│   │   │   ├── benefit.vue                     // benefit pahe
│   │   │   └── children
│   │   │       ├── commend.vue                 // recommend prize
│   │   │       ├── coupon.vue                  // coupon introduction
│   │   │       ├── exchange.vue                // exchange benefit
│   │   │       ├── hbDescription.vue           // benefit descripting
│   │   │       └── hbHistory.vue               // benefit's history
│   │   ├── city                 
│   │   │   └── city.vue                        // local city page
│   │   ├── confirmOrder
│   │   │   ├── children
│   │   │   │   ├── children
│   │   │   │   │   ├── addAddress.vue          // add address page
│   │   │   │   │   └── children
│   │   │   │   │       └── searchAddress.vue   // search address page
│   │   │   │   ├── chooseAddress.vue           // choose address page
│   │   │   │   ├── invoice.vue                 // choose invoice page
│   │   │   │   ├── payment.vue                 // pay page
│   │   │   │   ├── remark.vue                  // order remark page 
│   │   │   │   └── userValidation.vue          // user validation page
│   │   │   └── confirmOrder.vue                // confirm order page
│   │   ├── download
│   │   │   └── download.vue                    // downlad App
│   │   ├── find
│   │   │   └── find.vue                        // find page
│   │   ├── food
│   │   │   └── food.vue                        // food filter sort page
│   │   ├── forget
│   │   │   └── forget.vue                      // forget password, change password
│   │   ├── home
│   │   │   └── home.vue                        // index page
│   │   ├── login
│   │   │   └── login.vue                       // login and register page
│   │   ├── msite
│   │   │   └── msite.vue                       // merchant list page
│   │   ├── order
│   │   │   ├── children
│   │   │   │   └── orderDetail.vue             // order detail page
│   │   │   └── order.vue                       // order list page
│   │   ├── points
│   │   │   ├── children
│   │   │   │   └── detail.vue                  // points detail page
│   │   │   └── points.vue                      // points page
│   │   ├── profile
│   │   │   ├── children
│   │   │   │   ├── children
│   │   │   │   │   ├── address.vue             // address page
│   │   │   │   │   └── children
│   │   │   │   │       ├── add.vue             // add address page
│   │   │   │   │       └── children
│   │   │   │   │           └── addDetail.vue   // search address page
│   │   │   │   ├── info.vue                    // account info page
│   │   │   │   └── setusername.vue             // reset user page
│   │   │   └── profile.vue                     // user profile page
│   │   ├── search
│   │   │   └── search.vue                      // search page
│   │   ├── service
│   │   │   ├── children
│   │   │   │   └── questionDetail.vue          // question detail page
│   │   │   └── service.vue                     // service center page
│   │   ├── shop
│   │   │   ├── children
│   │   │   │   ├── children
│   │   │   │   │   └── shopSafe.vue            // shop check info page
│   │   │   │   ├── foodDetail.vue              // food detail page
│   │   │   │   └── shopDetail.vue              // shop detail page
│   │   │   └── shop.vue                        // shop filter page
│   │   └── vipcard
│   │       ├── children
│   │       │   ├── invoiceRecord.vue           // invoice record page
│   │       │   ├── useCart.vue                 // use card page
│   │       │   └── vipDescription.vue          // vip deacription page
│   │       └── vipcard.vue                     // vip handling page
│   ├── plugins                                 // plugins
│   ├── router
│   │   └── router.js                           // router configuration
│   ├── service                                 // data interaction and unified deployment
│   │   ├── getData.js                          // the unified deployment file for get data, and unified management of interfaces
│   │   └── tempdata                            // temporary data for the development
│   ├── store                                   // Vuex status management
│   │   ├── action.js                           // actions configuration
│   │   ├── getters.js                          // getters configuration
│   │   ├── index.js                            // use vuex,new store
│   │   ├── modules                             // store modules
│   │   ├── mutation-types.js                   // make const for muations
│   │   └── mutations.js                        // mutations configuration
│   └── style
│       ├── common.scss                         // common css
│       ├── mixin.scss                          // cs configuration file
│       └── swiper.min.css
│   ├── App.vue                                 // entry page js file
│   ├── main.js                                 // the main js for loading components
├── favicon.ico                                 // icon
├── index.html                                  // entry page html file
.

56 directories, 203 files

Download Details:

Author: bailicangdu

Live Demo: http://cangdu.org/elm/

GitHub: https://github.com/bailicangdu/vue2-elm

#vuejs #javascript #vue #vue-js

Brain  Crist

Brain Crist

1600783200

Giving Your Single Page Application (SPA) an API - The Quickest Way

I’ve been working with low-code tools for years, building automation integrations, and APIs. Recently, I’ve wondered whether we’ve advanced far enough to use a low-code platform as the back-end for a single page application (SPA).

It seems to be a nice combination — the SPA can be hosted anywhere, the API is quick and easy to develop, and they can evolve independently of each other e.g. if you need a native app just develop the UI and use the same API.

So, I decided to see whether we can by building a web application from scratch where

  • The developer (me) is not a full-time developer.
  • The application must interface with other systems.
  • The application must persist in data.

#api #rest-api #api-development #single-page-web-applications #single-page #restful-apis #low-code #low-code-platform

Franz  Becker

Franz Becker

1624522860

Single Page Apps: Placebo Junk?

SPA’s are wildly popular right now, with the fans of such site and application building starting to sound more like cultists than rational adults. This figures as there’s significant overlap between the cheesy framework fanboys and those making wild unfounded claims about how much “better” SPA are for user experience.

Sadly much like artists under the delusion that they are designers, those making these UX claims know just as little about user experience or accessibility.

As I’ve said many the time, front-end framework fans are devoid of the most basic knowledge of what HTML and CSS are even for; thus it’s no shock they have the same cult-like attitude when it comes to throwing “JavaScript for nothing” at websites.

Though MOST of the problems are not the concept of SPA’s fault. No, the blame lies at the implementation’s doorstep.

Implementation Woes

How an SPA is created and coded is where most of it goes wrong. Let’s go through some of the most common problems.

#javascript #css #html #single-page-applications #web-development #single page apps

Willa Anderson

Willa Anderson

1605791076

Here Are The Features That A Cloud Based SaaS Application Requires

Fast setup and slick UIs create incredible first impressions on users. However, enterprise managers are aware of the fact that they are at the tip of the iceberg. One of the features of a SaaS is interoperability, and such aspects are the ones that business owners need to lay a solid foundation.

Are you aware of the term “Software as a Service (SaaS)?” You probably heard it several times, but you may not know what it’s all about. Well, a SaaS, designed by a cloud-based application development company, is a cloud-based service that helps consumers gain access to software applications over the web. These applications remain hosted on the cloud and used for various purposes by companies as well as individuals.

SaaS created by a cloud-based application development company is the best alternative to traditional software installation systems. You may compare it with a TV channel that’s available for subscription. The user connects to a remotely-located base on a central server and uses a license to access data.

In other words, SaaS offers a method of software delivery by which you can access data from any device connected to the internet. Of course, this particular device should have a web browser. Software vendors host everything associated with the application, including servers, code, and databases.

Explore more: https://www.moontechnolabs.com/blog/here-are-the-features-that-a-cloud-based-saas-application-requires/

#mobile-application-development #cloud-based-saas-application #on-demand-applications #moontechnolabs #application-development-services