Demo

前端项目

2023年项目

1、DataV＋Vue可视化项目

技术栈: DataV + vue + axios

参考了http://datav.jiaminghi.com/demo/ 　 使用了全屏容器进行内容缩放，查看时请F11全屏以便于Demo充满屏幕。 使用飞线图等组件，并能实时显示天气。

展示地址：

https://gitxieada.github.io/Demo/datav/index.html 或者 http://htmlpreview.github.io/?https://github.com/Gitxieada/Demo/blob/master/datav/index.html

2、电商平台可视化项目

技术栈: echarts4 + vite + axios + typescript

参考了https://github.com/zoeee97/echartsDemoWithKoa2

使用axios获取本地json数据，实现中国地图，点击可以显示各省信息。

展示地址：

https://gitxieada.github.io/Demo/echarts/index.html

3、WebRTC

技术栈: react + typescript + umi + socket.io-client + webrtc-adapter

参考文章：

WebRTC 从实战到未来！前端如何实现一个最简单的音视频通话？

基于 WebRTC 的 P2P 文件传输

基于webRTC的前端远程控制系统

效果：

展示地址：

https://gitxieada.github.io/Demo/webrtc/index.html#/

信令服务: https://github.com/Gitxieada/signalServer/releases

后端使用express、socket.io提供信令服务，pkg将NodeJS项目打包exe;

展示地址：

https://gitxieada.github.io/Demo/webrtc/index.html#/signal

2018年项目

1、JS实现人机大战之五子棋（UI篇）—慕课网

2、涉及js及canvas绘图知识

效果：

https://gitxieada.github.io/Demo/js_UI/index.html

3、JS实现人机大战之五子棋（AI篇）—慕课网

参考了xiaomaomiao人机大战五子棋的代码，她的注释很详细。

效果： https://gitxieada.github.io/Demo/js_AI/index.html

4、电商站首页布局 - HTML&CSS实战

教程：电商站首页布局实战 - HTML&CSS实战 - 课时ID-11.x

效果：https://gitxieada.github.io/Demo/11.xie_code/index.html

5、Bootstrap新闻站开发 - Bootstrap实战

教程：Bootstrap新闻站开发 - Bootstrap实战

效果：https://gitxieada.github.io/Demo/15.xie_code/main/index.html

6、使用vue2.0实现购物车和地址选配功能

购物车页面演示地址：http://htmlpreview.github.io/?https://github.com/Gitxieada/Demo/blob/master/vue_shoppingcart/cart.html

地址页演示地址：http://htmlpreview.github.io/?https://github.com/Gitxieada/Demo/blob/master/vue_shoppingcart/address.html