Cài đặt express
npm i --save express
Cài đặt
npm i --save body-parser
Sử dụng body-parser để nhận được dữ liệu với phương thức POST
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}))
Khai báo thư mục sử dụng cho frontend như: js, images, css, font,..
app.use('/public', express.static('public'))
Như vậy nếu thư mục public như này:
public
├── css
├── js
├── fonts
└── images
├── hoa.png
└── la.jpg
Thì đường dẫn ảnh sẽ là:
<img src="/images/hoa.png">
<img src="/images/la.jpg">
app.get('/', (req, res) => {
res.send('Hello world!')
});
router = express.Router();
router.get('/', (req, res) => {
res.send('Hello world! 1')
});
return router
const user = require('./routes/user')(express);
app.use('/user', user)
Ví dụ:
Router trong file /routers/user.js có dạng:
router.get('/', (req, res) => {
res.send('Hello world! 1')
});
router.get('/1', (req, res) => {
res.send('User 1')
});
Thì khi đó đường dẫn sẽ là:
http://localhost:3000/user => Hello world! 1
http://localhost:3000/user/1 => User 1
Cài đặt
npm i --save express-session
Cấu hình
app.use(session({
cookie: { maxAge: (3600 * 1000), secure: false },
secret: 'JackCodeHammer'
}));
-
secret (Bắt buộc)[String | mảng]: dùng để đăng ký cookie session ID
-
cookie: Cấu hình cho cookie
Cài đặt
npm i --save nunjucks
Cấu hình
nunjucks.configure('views', {
autoescape: true,
cache: false,
express: app,
watch: true
});
app.engine('html', nunjucks.render);
app.set('view engine', 'html')
Sử dụng jQuery để lấy dữ liệu trong form
Sử dụng axios để gửi dữ liệu lên server mà không phải reload lại trang
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Sử dụng jQuery().serialize() để lấy dữ liệu trong form
Nhớ là các input, select, textarea,.. trong form phải có name nhé
let formData = jQuery('form#formsignup').serialize();
Dùng axios gửi dữ liệu lên server
-
then: Nếu thành công thì thực thi câu lệnh bên trong
-
catch: Nếu thất bại thì thực thi câu lệnh bên trong
axios.post('URL', {})..
axios.get('URL', {})..
axios.put('URL', {})..
axios.delete('URL', {})..
Khi đó server sẽ hứng request tương ứng
router.post('URL', (req, res) => {});
router.get('URL', (req, res) => {});
router.put('URL', (req, res) => {});
router.delete('URL', (req, res) => {});
Dữ liệu trả về nên là jSon, array, string, number.
res.json({});
res.send('');
Client nhận được dữ liệu và dùng dữ liệu đó để hiển thị ra.
Mỗi 1 request sẽ kiểm tra nếu k có session.cart thì gán nó bằng mảng object rỗng
app.use((req, res, next) => {
if(!req.session.cart) {
req.session.cart = {};
}
next()
})
Khi add to cart đường dẫn có dạng (Có nhiều dạng khác nhau nhưng ở đây mình gửi lên server dạng query)
http://localhost:3000/?addtocart=IDSP
Khi đó ở server sẽ hứng request và xử lý
let q = req.query.addtocart; // Lấy query
if(q !== undefined || q > 0){ //Nếu dữ liệu có giá trị và > 0 thì
if(req.session.cart[q]) { // Kiểm tra sản phẩm đã có trong giỏ hàng chưa
req.session.cart[q] += 1; // Có rồi thì + thêm 1
}else {
req.session.cart[q] = 1; // Chưa có thì thêm và gán giá trị = 1
}
}
Object cart sẽ có dạng kiểu như này
{
SP1: 1,
SP2: 2,
SP3: 3
}
Khi có object thì ở server cart lấy dữ liệu các sản phẩm trong cart rồi hiển thị ra frontend.
=========================== HẾT ===========================