1. チャット
ある日、モニターが生徒たちから位置情報を共有できるアドレス帳を開発してほしいと言われたので、私はその機能を自分で設計しました。ユーザーの役割、Weiboの投稿、位置情報の共有などが含まれます。今回はちょっとわがままもありましたが、最近見ていたangularjsを練習するために、思い切ってNode.js MongoDB angular.jsソリューションを選択しました。もちろん、Node.js 開発における私の経験はますます深まっています。昨年、私のリーダーが、メンテナンスをより便利にするために、各ノード サービスが 1 つのビジネス機能のみをサポートするように努めるようにと私に言ったのを覚えています。当時、私は特に Node サービスを特に強力なものにしたいと考えていました。現在、リーダーのアプローチは正しいようです。私はノード サービス機能を簡素化する傾向があります...
2. 乾物に直接行きます
データベース サービスは Alibaba Cloud にデプロイされ、静的ファイル サーバーは Github ページを使用します。
Github プロジェクトのアドレス: https://github.com/vczero/OurTimes
オンライン体験のアドレス: http://vczero.github.io/tuban/main.html#/
ボールについて話すための写真はありません。上に 2 枚のスクリーンショットを示します。
(1)ホームページ
(2)アドレス帳
....オンラインでのさらなる体験...
3. プロジェクト
プロジェクト全体: https://github.com/vczero/OurTimes
必要なサービスを開発しました: https://github.com/vczero/OurTimes/tree/master/server
開いた Web PC クライアント: https://github.com/vczero/OurTimes/tree/master/client-web
シンプルなバックエンド管理システムを開発しました: https://github.com/vczero/OurTimes/tree/master/client-admin
フォークへようこそ。コードをフォローして共有し、協力してフロントエンドを構築してください。
4. Web PC 側の Angular のエントリ ファイル コードを添付します
//调用の服务列表
app.constant('ServiceConfig', {
wei_content: SERVER_BASE_URL 'wei/get',
wei_zan: SERVER_BASE_URL 'wei/zan',
wei_comment: SERVER_BASE_URL 'wei/コメント',
wei_create: SERVER_BASE_URL 'wei/create',
user_get: SERVER_BASE_URL 'user/get',
user_login: SERVER_BASE_URL 'ユーザー/ログイン',
user_register: SERVER_BASE_URL 'ユーザー/登録',
user_common: SERVER_BASE_URL 'user/getCommon',
user_ben: SERVER_BASE_URL 'user/getBen',
user_self: SERVER_BASE_URL 'user/getSelf',
user_common_update: SERVER_BASE_URL 'user/updateCommon',
user_ben_update: SERVER_BASE_URL 'user/updateBen',
user_ben_get_name: SERVER_BASE_URL 'user/singleBen/name',
user_common_get_nickname: SERVER_BASE_URL 'user/getCommon/name',
user_ben_get_realname: SERVER_BASE_URL 'user/singleBen/name',
wei_get_token_page: SERVER_BASE_URL 'wei/getByToken',
wei_delete: SERVER_BASE_URL 'wei/delete',
user_update_password: SERVER_BASE_URL 'user/updatePassword',
Article_get: SERVER_BASE_URL 'article/get',
Article_detail: SERVER_BASE_URL 'article/get/id',
amap_url: 'http://webapi.amap.com/maps?v=1.3&key=ad925c5003760094713775d64748d872&callback=init'
});
//JSON 解析
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$httpProvider.defaults.transformRequest = [関数(データ) {
var obj = [];
for (データの var キー) {
obj.push(key '=' data[key]);
}
return obj.join('&');
}];
}]);
//路由配置
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
/*URL路由*/
$urlRouterProvider.otherwise("/");
/*状態态構成*/
$stateProvider
//首页
.state('インデックス', {
URL: '/'、
ビュー: {
'': {
templateUrl: 'views/index/index.html',
}、
'header@index': {
templateUrl: 'views/header.html',
コントローラー: 'HeaderController'
}、
'footer@index': {
templateUrl: 'views/footer.html',
コントローラー: ''
}、
'weibo@index': {
templateUrl: 'views/index/weibo.html',
コントローラー: 'WeiboController'
}、
'article@index': {
templateUrl: 'views/index/article.html',
コントローラー: 'ArticleController'
}、
'post@index': {
templateUrl: 'views/index/post.html',
コントローラー: 'PostWeiboController'
}
}
})
.state('ログイン', {
URL: '/login',
ビュー: {
'': {
templateUrl: 'views/login/login.html',
コントローラー: 'LoginController'
}
}
})
.state('登録', {
URL: '/register',
ビュー: {
'': {
templateUrl: 'views/register/register.html',
コントローラー: 'RegisterController'
}
}
})
.state('連絡先', {
URL: '/contacts',
ビュー: {
'': {
templateUrl: 'views/contacts/contacts.html',
コントローラー: ''
}、
'header@contacts': {
templateUrl: 'views/header.html',
コントローラー: 'HeaderController'
}、
'userinfo@contacts': {
templateUrl: 'views/contacts/userinfo.html',
コントローラー: 'UserInfoController'
}、
'map@contacts': {
templateUrl: 'views/contacts/map.html',
コントローラー: 'MapController'
}、
'search@contacts': {
templateUrl: 'views/contacts/search.html',
コントローラー: 'SearchUserController'
}
}
})
.state('ucenter', {
URL: '/ucenter',
ビュー: {
'': {
templateUrl: 'views/ucenter/ucenter.html',
コントローラー: ''
}、
'header@ucenter': {
templateUrl: 'views/header.html',
コントローラー: 'HeaderController'
}、
'userWeibo@ucenter': {
templateUrl: 'views/ucenter/weibo.html',
コントローラー: 'UcWeiboController'
}、
'userDetailInfo@ucenter': {
templateUrl: 'views/ucenter/user.html',
コントローラー: 'UcUserController'
}、
'footer@ucenter': {
templateUrl: 'views/footer.html',
コントローラー: ''
}
}
})
.state('記事', {
URL: '/article/:id',
ビュー: {
'': {
templateUrl: 'views/article/article.html',
コントローラー: ''
}、
'header@article': {
templateUrl: 'views/header.html',
コントローラー: 'HeaderController'
}、
'article_content@article': {
templateUrl: 'views/article/article_content.html',
コントローラー: 'ArticleDetailController'
}、
'footer@article': {
templateUrl: 'views/footer.html',
コントローラー: ''
}
}
})
.state('article_index', {
URL: '/article',
ビュー: {
'': {
templateUrl: 'views/article/article.html',
コントローラー: ''
}、
'header@article_index': {
templateUrl: 'views/header.html',
コントローラー: 'HeaderController'
}、
'article_content@article_index': {
templateUrl: 'views/article/article_content.html',
コントローラー: 'ArticleDetailController'
}、
'footer@article_index': {
templateUrl: 'views/footer.html',
コントローラー: ''
}
}
});
}]);
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
